متا تگ viewport metatag و استفاده در طراحی نسخه موبایل وب سایت

معرفی متا تگ viewport metatag و استفاده آن در طراحی نسخه موبایل وب سایت


بهزاد علی بیگی ۵۱ دیدگاه اصول طراحی وب سایت سه‌شنبه, 25th دسامبر , 2012 79022 بازدید

زمانی که از طراحی واکنشگرا و یا ساخت نسخه موبایل وب سایت سخن به میان می آید می بایست از روش هایی استفاده کنیم که قبلا برای ساخت نسخه معمولی وب سایت با آنها برخورد نکرده بودیم.یکی از این موارد استفاده از متا تگ viewport است.

responsive_web_design

متا تگ viewport چیست ؟ و چه کاربردی در طراحی نسخه موبایل سایت دارد ؟

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

در این مقاله سعی می کنیم با یک مثال ساده و به دور از پیچیدگی زیاد دلیل استفاده از این تگ را به طور عملی نشان دهیم.

بیایید شروع کنیم: یک صفحه بسیار ساده با ساختار زیر درست می کنیم؛

<!doctype html>
<html dir="rtl" lang="fa" >
<head>
<meta charset="UTF-8">
<title>این یک تست است</title>
</head>
<body>
<p>این یک تست است</p>
</body>
</html>

در حالیکه صفحه فوق در کامپیوتر بسیار خوب دیده می شود آن را با موبایل چک نمایید. تصویر آن به صورت زیر خواهد بود.

withoutviewport

همانطور که مشاهده می کنید متن بسیار کوچک است وبرای دیدن آن نیاز به زوم کردن داریم، این یکی از بیشمار مشکلی است که شما در ساخت نسخه موبایل با آن برخورد می کنید.

اگر به طور منطقی فکر کنیم دلیل آن را متوجه می شویم. مرورگر موبایل، صفحه را می بیند و می پندارد که برای کامپیوتر های رومیزی طراحی شده است، در نتیجه عرضی به مقدار مثلا ۹۸۰ پیکسل را به آن می دهد و آن را با عرض دستگاه منطبق می کند، در واقع آن را zoom out می کند. در نتیجه برای خواندن محتوای صفحه نیاز داریم که زوم کنیم.

همه می دانیم این نمایش برای نسخه موبایل جالب نیست. نسخه موبایل وب سایت باید بدون زوم کردن خوانا وقابل دسترس باشد. حالا همان کد بالا را با کمی تغییر (اضافه شدن متاتگ viewport ) می بینیم:

<!doctype html>
<htmldir="rtl" lang="fa" >
<head>
<meta charset="UTF-8">
<title>این یک تست است</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>این یک تست است</p>
</body>
</html>

و نمایش آن در موبایل :

withviewport

خیلی بهتر شد!

با مقدار دهی device-width به تگ viewport به مرورگر می گوییم عرض دستگاه را با عرض صفحه نمایش یکی کن مثلا اگر عرض دستگاه ۳۲۰ پیکسل است، به جای آن که مقدار پیش فرض ۹۸۰ پیکسل را به عرض صفحه اختصاص دهد همان مقدار را به عرض صفحه اختصاص بدهد.

این متا تگ در بسیاری از موبایل ها پشتیبانی می شود و جای نگرانی زیادی در مورد عدم ساپورت آن وجود ندارد.

در زیر یک تگ viewport با ویژگی های کاملش نمایش داده می شود :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

در صورتی که تگ viewport بالا را در وب سایت خود قرار دهید با توجه به وجود maximum-scale= 1.0 و user-scale = noکاربر نمی تواند وب سایت را زوم نماید. و توصیه شده است این کار انجام نشود زیرا حتی با وجود نسخه موبایل در بعضی شرایط ممکن است احتیاج به زوم باشد. در نتیجه یک تگ viewport استاندارد را می توان به صورت زیر نوشت:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

حالا که با دلیل استفاده از viewport آشنا شدیم به سراغ باقی خصوصیات آن می رویم.

  • Width عرض viewport به پیکسل ( یا عرض دستگاه ) است و اگر ست نشود روی سایز نسخه کامپیوتر ست می شود. (مثلا: عرض ۹۸۰ پیکسل)
  • Height ارتفاع viewport به پیکسل (ارتفاع دستگاه)
  • Initial - scale ( بین ۰ تا ۱۰ ) کشیدگی پیش فرض را نشان می دهد که اگر بر روی ۱ باشد به طور استاندارد صفحه را بدون zoom in و یا zoom out نشان می دهد.
  • Minimum - scale حداقل مقداری که کاربر می تواند zoom out کند.
  • Maximum - scale حداگثر مقداری که کاربر می تواند zoom in کند.
  • User - scale به کاربران با مقدار yes و no یا اجازه zoom in و یا zoom out را می دهد و یا نمی دهد.

البته متا تگهای ناشناخته دیگری هم وجود دارند که در بعضی از استانداردها برای نمایش نسخه موبایل استفاده می شوند که البته همه آن را پشتیبانی نمی کردند و ما در اینجا تنها به آنها اشاره می کنیم.

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />

البته همان طوری که گفته شد با توجه به پشتیبانی زیاد از تگ viewport دیگر نیازی به استفاده از متا تگ های دیگر نیست.حالا اگر بخواهید می توانید تا حدی نسخه موبایل وب سایت خود را بسازید. اینک با یکی از چالش های ساخت نسخه موبایل وب سایت ها آشنا شدید به نظر شما در ساخت یک نسخه موبایل چه چالش های دیگری سر راه است؟



نویسنده / مترجم : بهزاد علی بیگی

از سال 83 دارم تو زمینه طراحی سایت فعالیت میکنم. در حال حاضر هم مدیر شرکت وب اسکالا هستم.


۵۱ دیدگاه برای این نوشته ثبت شده است


  1. حامد
    26 دسامبر 2012

    نکته بسیار کاربردی و جالبی بود که تا حالا جایی ندیده بودم.
    تنکس اِ لات ;)




  2. صالح
    26 دسامبر 2012

    عالی بود توضیحات،سپاس




  3. امید راد
    26 دسامبر 2012

    عالی بود
    من به شخصه اینو نمیدونستم
    ممنون




  4. Hesam
    27 دسامبر 2012

    بسیار ممنون
    با توجه به این متاتگ احتیاج هست که تو css ، عرض صفحه رو مشخص کرد ؟




    • بهزاد علی بیگی
      27 دسامبر 2012

      بهتر است که عرض صفحه مشخص باشد. ولی این به معنی عرض ثابت به پیکسل نیست اگر از % استفاده بشه بهتره




  5. مهسا کیانی
    27 دسامبر 2012

    مرسی… نکته ی خوب و کاربردی بود




  6. soroush
    27 دسامبر 2012

    ممنون نکته ی مفیدی بود.




  7. فرزین سیف الهی
    27 دسامبر 2012

    خیلی ممنونم. عالیه!




  8. فرید
    29 دسامبر 2012

    کاربردی بود
    خیلی ممنون




  9. امید دهقانزاد
    29 دسامبر 2012

    نکته خوبی بود اگرچه در سی ام اس ها استفاده از افزونه خاص اینکار بهتر است . باز هم ممنون :)




  10. علی حدادکار
    2 ژانویه 2013

    بسیار روش جالبی بود تا حالا هیچ جا ندیده بودم.




  11. مهدی
    2 ژانویه 2013

    سلام
    من مقاله شما رو خوندم بسیار مفید بود…
    یه سوا دارم من الان دارم تازه قالب میسازم این کدها رو باید کجا به کار ببرم؟
    توی سی اس اس یا…؟
    ممنون میشم کمکم کنید من یه فرد مبتدی هستم بی زحمت مبتدیانه توضیح بدید
    tank




  12. سوران خضری
    3 ژانویه 2013

    بسیار جالب بود
    ممنون از مطلب خوبتون




  13. سعید
    13 ژانویه 2013

    کاربردی و مفید




  14. مهسا
    25 ژانویه 2013

    سلام. من تازه کارم در این زمینه و سوالی داشتم. من از DW دارم استفاده میکنم برای نوشتن.
    من این کد رو توی head اضافه میکنم اما وقتی multi screen preview رو میزنم تغییری رو نمیبینم برای phone view و tablet view. برای desktop view هم که خب نباید تغییر کنه. میخوام ببینم جای دیگه ای هم باید کدی رو عوض کنم؟




    • بهزاد علی بیگی
      27 ژانویه 2013

      احتیاجی به کد دیگری برای مشاهده تغییر فوق نیست.
      من خیلی وقته از dw استفاده نمیکنم اما می دونم بسیاری از این شبیه ساز ها برای موبایل درست عمل نمی کنند و تنها نمایش در دستگاه موبایل که یک نمایش واقعی رو میتونه نشون میده




  15. مهسا
    28 ژانویه 2013

    ممنون از پاسختون :)




  16. پدرام
    19 مارس 2013

    مطلب مفیدی بود، ولی فقط برای تکست کار میکنه؟ مثلا باکس های موجود در صفحه یا عکسها چطور؟ در مورد سایز اونا چطور عمل میکنه؟




  17. reza
    23 مارس 2013

    سلام
    ممنون بابت زحماتتون
    سال نو و نوروزتونم مبارک باشه
    به درخواست راهنمایی فوری از محضرتون داشتم و اونم اینه که
    این لوگو بالا سمت راستتونو میشه بگید چجوری درست کردید ؟
    با inspect element که دیدم بکم پیجیده بود
    قبلا به جا دیدم برای Html یه div گذاشته بود و با css کدای عکس و width , height داده بود و برای hover یه دستور background-position : 0 -59px داده بود که الان اینو تست کردم به صورت انیمیشنی کار نکرد
    درست بادم نیست
    اما ساده بود
    ممکنه توضیج بدید
    ممنون



    • با اجازه امیر سروری عزیز
      اگر دقت کنید یک بک گراند ۲۴۰*۱۶۰ است که با
      :hover
      position بک گراند عوض میشه و برای انمیشین از
      transition
      استفاده شده




  18. رضا
    23 مارس 2013

    یه سوال دیگه
    استفاده ازین meta tag یعنی دیگه لازم نیست از boot strap استفاده کرد ؟




  19. بهنام
    11 آوریل 2013

    امروز لازمم شد :)
    ممنون.




  20. فهیمه
    2 آگوست 2013

    عالی
    ساده و خوب.
    ی سوال. پس در کل باید اندازه صفحات رو % وارد کنیم . همیشه همه جا ؟




  21. roimusic
    7 ژوئن 2014

    ممنون مفید بود




  22. راهنما خرید
    11 ژوئن 2014

    خیلی عالی بود
    نکاتی جالبی داشت که بدردم خورد.



  23. مفید و تاثیر گذار …

    ممنون بابت وقتی که گذاشتید




  24. مهدی ربیعی
    24 ژوئن 2014

    سلام
    مطلب عالی
    یه سوال هم جهت با اموزش شما

    در طراحی سایتها، گاهی در نسخه اصلی بخشی رو میبینیم مثل تبلیغات که در نسخه موبایل همون سایت دیگه اون بخش نیست، یعنی دیده نمیشه

    برای این کار چه روشی استفاده میشه
    یا سایتهایی دیدم که رسپانسیو هستن و استایل نسخه موبایلشون کاملا با نسخه دسکتاپشون متفاوت بوده
    آیا تمام استایل رو برای نسخه موبایل با مدیا کوئری از اول نوشته ؟




    • eve
      2 اکتبر 2014

      تمام استایل از اول نوشته نمیشه . بعضی از قسمت ها که نیاز نیست تو موبایل دیده بشه رو میان با این دستور محو میکنن. مثلا برای صفحه نمایش های کمتر از ۴۸۰ پیکسل میان کلاس ads رو بر میدارن

      @media screen and {max-device-width=480px}
      {
      .ads{display:none;}
      }




  25. pouya
    5 جولای 2014

    با سلام
    وقتتون بخیر
    یه سوال داشتم
    من زیاد تو زمینه وردپرس مهارت ندارم
    اگه بخوام نسخه موبایل برای وب سایتم درست کنم باید چه کدی رو تو سایت قرار بدم
    ممنون میشم راهنمایی کنید
    ممنون




    • eve
      2 اکتبر 2014

      با وجود طراحی واکنش گرا دیگه هیشکی نمیره دنبال نسخه جداگانه برای موبایل . برو دنبال طراحی واکنش گرا(responsive) جوابت رو میگیری




  26. شاپرک
    13 جولای 2014

    خیلی ممنون
    مفید بود :)




  27. بهمن
    8 نوامبر 2014

    مرسی! مفید بود!




  28. شادی
    3 دسامبر 2014

    thanks a lot.Simple and practical.God bless u




  29. مسعود
    12 فوریه 2015

    ممنون از مطلب خوبتان




  30. javad
    18 می 2015

    سلام گوگل ۷ هزار ارور viewport برای نسخه موبایل ثبت کرده میشه اون کد استانداردی که دادی رو در متا نیم ها بزارم درست بشه؟
    آخه رزبلاگ نسخه موبایل رو نمیشه ویرایش کرد و فقط قالب میشه ویرایش کرد اگه بزارم کار میکنه یا باید در پست ها هم باشه؟؟؟
    مرسی اگه جواب بدی




    • غریب
      15 آگوست 2016

      با اجازه مدیریت گرامی سایت

      دوست عزیز اول باید طراحی واکنش گرا صورت بگیره و برای ابعاد مشخص استایل هایی که باید تغییر کنند مشخص بشن
      اما بعد همه این کارها حتما باید از تگی که در این سایت گذاشتن هم استفاده کنید
      خود بنده در بعضی صفحات یادم رفته بود بگذارم تگ رو با وجود اینکه اون پیج واکنش گرا بود منتها بدون این تگ گوگل وب مستر برای بنده هم ایراد گرفته بود اما با گذاشتن این تگ مفید ایراد ها کاملا برطرف شد
      موفق باشید




  31. امیرعلی
    17 جولای 2015

    خیلی ممنون. اصلا به این موضوع توجه نکرده بوم تا اینکه بالاخره به خاطر نبودش به مشکل برخوردم




  32. zahra
    1 آگوست 2015

    سلام
    ببخشید سایتی که روش کار میکنم فقط روی مدل
    Samsung Galaxy Y
    بد نشون داده میشه، یعنی صفحه فیت نیس و منوها هم نمایش داده نمیشه، یعنی کلا روی رزولوشن ۲۴۰×۳۲۰ به پایین مشکل نمایش داره، من باید کدوم مقدارو تغییر بدم؟ یعنی اصن چیکار باید بکنم که روی گوشی های با این رزولوشن هم بدون مشکل صفحه نمایش داده بشه؟




  33. غریب
    15 آگوست 2016

    سلام واقعا مرسی
    توضیحتون بسیار مختصر و مفید بود
    جوری که برای همه قابل فهم باشه مرسی و خسته نباشید دوست گرامی




  34. لیلا
    16 اکتبر 2016

    ممنون خیلی عالی بود




  35. محمد
    5 فوریه 2017

    ممنون مفید بود. اگه سایت ریسپانسیو باشه ولی این متا رو نداشته باشه چی؟




  36. شهرام
    24 جولای 2017

    با سلام
    من تست میکنم فقط صفحه اول سایتم رو میزنه همون دو خطای معمول رو و خطایview……نمیاد یبکی متون و یکی دکمه ها منتها همونطور که گفتم برای صفحه اول فقط میاد درصورتیکه قاب ادامه مطالبم با صفحه اصلی اصلا فرق نیمکنه هدر همونه فوتر همونه یلوک راست و چپ همونه تگها و مطالب هم در صفحه اصلی ۱۰ تا به ازای هر مطلب اما در صفحه ادامه مطلب مربوط به مطلبه
    بنظرتون اشکال از کجا میتونه باشه؟




  37. حسن
    6 سپتامبر 2017

    ببخشید آیا به user-scalable میشه مقدار ۱ یا ۰ داد .؟

    برخی از وبسایت دادن که درست هم هست. و w3 validator مشکل نمیگیره.




  38. ساسان
    16 نوامبر 2017


  39. سپهر
    4 فوریه 2018

    با تشکر از پست تون
    لطفا viewport برای css هم توضیح بدید




  40. علی
    9 ژوئن 2018

    داداش ببین یعنی دمت گرما دمممتتتتتت گرررررمممم… اینجا بودی میگرفتم بوست میکردم کره زمینو گشتم اینو پیدا نکردم تو مشکلمو حل کردی.




  41. مهدی
    11 مارس 2019

    ممنون از شما – خیلی کمک کرد این مطلب.




  42. علیرضا الله یاری
    20 آگوست 2019

    سلام
    ممنون بابت آموزشتون ، عالی بود!
    فقط یه سوال…
    مثلا من در css از کد: media screen@ استفاده کردم و تگ viewport هم گذاشتم.
    که الان اینطوریه:
    تگ ویو پورت:

    یکی از کد های ریسپانسیو:
    (media (min-width:100px) and ( max-width: 360px@
    و در این کد ریسپانسیو مشخص کردم که از ۱۰۰px تا ۳۶۰px صفحه رو ۳۶۰px نشون بده… مثلا اگر یکی که عرض موبایلش ۳۲۰px باشه به اندازه ۳۶۰px نشون بده.
    ولی مشکلی که من دارم اینه که… کسی که عرض موبایلش ۳۲۰px هست صفحه براش زوومه و باید زووم اوت کنه تا کامل ببینه.
    ممنون میشم راهنماییم کنید.
    با تشکر.



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2021 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.