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

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


بهزاد علی بیگی ۴۶ دیدگاه اصول طراحی وب سایت سه شنبه, ۵ام دی , ۱۳۹۱ 33727 بازدید

زمانی که از طراحی واکنشگرا و یا ساخت نسخه موبایل وب سایت سخن به میان می آید می بایست از روش هایی استفاده کنیم که قبلا برای ساخت نسخه معمولی وب سایت با آنها برخورد نکرده بودیم.یکی از این موارد استفاده از متا تگ 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. حامد
    ۶ دی ۱۳۹۱

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




  2. صالح
    ۶ دی ۱۳۹۱

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




  3. امید راد
    ۶ دی ۱۳۹۱

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




  4. Hesam
    ۷ دی ۱۳۹۱

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



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




  5. مهسا کیانی
    ۷ دی ۱۳۹۱

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




  6. soroush
    ۷ دی ۱۳۹۱

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



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




  8. فرید
    ۹ دی ۱۳۹۱

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



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




  10. علی حدادکار
    ۱۳ دی ۱۳۹۱

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




  11. مهدی
    ۱۳ دی ۱۳۹۱

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




  12. سوران خضری
    ۱۴ دی ۱۳۹۱

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




  13. سعید
    ۲۴ دی ۱۳۹۱

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




  14. مهسا
    ۶ بهمن ۱۳۹۱

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




    • بهزاد علی بیگی
      ۸ بهمن ۱۳۹۱

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




  15. مهسا
    ۹ بهمن ۱۳۹۱

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




  16. پدرام
    ۲۹ اسفند ۱۳۹۱

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




  17. reza
    ۳ فروردین ۱۳۹۲

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




    • بهزاد علی بیگی
      ۱۸ فروردین ۱۳۹۲

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




  18. رضا
    ۳ فروردین ۱۳۹۲

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




  19. بهنام
    ۲۲ فروردین ۱۳۹۲

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




  20. فهیمه
    ۱۱ مرداد ۱۳۹۲

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




  21. roimusic
    ۱۷ خرداد ۱۳۹۳

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




  22. راهنما خرید
    ۲۱ خرداد ۱۳۹۳

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



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

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




  24. مهدی ربیعی
    ۳ تیر ۱۳۹۳

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

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

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




    • eve
      ۱۰ مهر ۱۳۹۳

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

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




  25. pouya
    ۱۴ تیر ۱۳۹۳

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




    • eve
      ۱۰ مهر ۱۳۹۳

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




  26. شاپرک
    ۲۲ تیر ۱۳۹۳

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




  27. بهمن
    ۱۷ آبان ۱۳۹۳

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




  28. شادی
    ۱۲ آذر ۱۳۹۳

    thanks a lot.Simple and practical.God bless u




  29. مسعود
    ۲۳ بهمن ۱۳۹۳

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




  30. javad
    ۲۸ اردیبهشت ۱۳۹۴

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




    • غریب
      ۲۵ مرداد ۱۳۹۵

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

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




  31. امیرعلی
    ۲۶ تیر ۱۳۹۴

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




  32. zahra
    ۱۰ مرداد ۱۳۹۴

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




  33. غریب
    ۲۵ مرداد ۱۳۹۵

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




  34. لیلا
    ۲۵ مهر ۱۳۹۵

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




  35. محمد
    ۱۷ بهمن ۱۳۹۵

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




  36. شهرام
    ۲ مرداد ۱۳۹۶

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




  37. حسن
    ۱۵ شهریور ۱۳۹۶

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

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



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





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

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

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

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

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



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

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