زمانی که از طراحی واکنشگرا و یا ساخت نسخه موبایل وب سایت سخن به میان می آید می بایست از روش هایی استفاده کنیم که قبلا برای ساخت نسخه معمولی وب سایت با آنها برخورد نکرده بودیم.یکی از این موارد استفاده از متا تگ viewport است.
متا تگ 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>
در حالیکه صفحه فوق در کامپیوتر بسیار خوب دیده می شود آن را با موبایل چک نمایید. تصویر آن به صورت زیر خواهد بود.
همانطور که مشاهده می کنید متن بسیار کوچک است وبرای دیدن آن نیاز به زوم کردن داریم، این یکی از بیشمار مشکلی است که شما در ساخت نسخه موبایل با آن برخورد می کنید.
اگر به طور منطقی فکر کنیم دلیل آن را متوجه می شویم. مرورگر موبایل، صفحه را می بیند و می پندارد که برای کامپیوتر های رومیزی طراحی شده است، در نتیجه عرضی به مقدار مثلا 980 پیکسل را به آن می دهد و آن را با عرض دستگاه منطبق می کند، در واقع آن را 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>
و نمایش آن در موبایل :
خیلی بهتر شد!
با مقدار دهی device-width به تگ viewport به مرورگر می گوییم عرض دستگاه را با عرض صفحه نمایش یکی کن مثلا اگر عرض دستگاه 320 پیکسل است، به جای آن که مقدار پیش فرض 980 پیکسل را به عرض صفحه اختصاص دهد همان مقدار را به عرض صفحه اختصاص بدهد.
این متا تگ در بسیاری از موبایل ها پشتیبانی می شود و جای نگرانی زیادی در مورد عدم ساپورت آن وجود ندارد.
در زیر یک تگ 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به پیکسل ( یا عرض دستگاه ) است و اگر ست نشود روی سایز نسخه کامپیوتر ست می شود. (مثلا: عرض 980 پیکسل)Heightارتفاعviewportبه پیکسل (ارتفاع دستگاه)Initial - scale( بین 0 تا 10 ) کشیدگی پیش فرض را نشان می دهد که اگر بر روی 1 باشد به طور استاندارد صفحه را بدون 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 دیگر نیازی به استفاده از متا تگ های دیگر نیست.حالا اگر بخواهید می توانید تا حدی نسخه موبایل وب سایت خود را بسازید. اینک با یکی از چالش های ساخت نسخه موبایل وب سایت ها آشنا شدید به نظر شما در ساخت یک نسخه موبایل چه چالش های دیگری سر راه است؟
حامد
26 December 2012
نکته بسیار کاربردی و جالبی بود که تا حالا جایی ندیده بودم.
تنکس اِ لات ;)
صالح
26 December 2012
عالی بود توضیحات،سپاس
امید راد
26 December 2012
عالی بود
من به شخصه اینو نمیدونستم
ممنون
Hesam
27 December 2012
بسیار ممنون
با توجه به این متاتگ احتیاج هست که تو css ، عرض صفحه رو مشخص کرد ؟
بهزاد علی بیگی
27 December 2012
بهتر است که عرض صفحه مشخص باشد. ولی این به معنی عرض ثابت به پیکسل نیست اگر از % استفاده بشه بهتره
مهسا کیانی
27 December 2012
مرسی… نکته ی خوب و کاربردی بود
soroush
27 December 2012
ممنون نکته ی مفیدی بود.
فرزین سیف الهی
27 December 2012
خیلی ممنونم. عالیه!
فرید
29 December 2012
کاربردی بود
خیلی ممنون
امید دهقانزاد
29 December 2012
نکته خوبی بود اگرچه در سی ام اس ها استفاده از افزونه خاص اینکار بهتر است . باز هم ممنون :)
علی حدادکار
2 January 2013
بسیار روش جالبی بود تا حالا هیچ جا ندیده بودم.
مهدی
2 January 2013
سلام
من مقاله شما رو خوندم بسیار مفید بود…
یه سوا دارم من الان دارم تازه قالب میسازم این کدها رو باید کجا به کار ببرم؟
توی سی اس اس یا…؟
ممنون میشم کمکم کنید من یه فرد مبتدی هستم بی زحمت مبتدیانه توضیح بدید
tank
بهزاد علی بیگی
3 January 2013
ممنونم . این یک متا تگ است و جای آن در تگ هد در اچ دی ام ال است
سوران خضری
3 January 2013
بسيار جالب بود
ممنون از مطلب خوبتون
سعید
13 January 2013
کاربردی و مفید
مهسا
25 January 2013
سلام. من تازه کارم در این زمینه و سوالی داشتم. من از DW دارم استفاده میکنم برای نوشتن.
من این کد رو توی head اضافه میکنم اما وقتی multi screen preview رو میزنم تغییری رو نمیبینم برای phone view و tablet view. برای desktop view هم که خب نباید تغییر کنه. میخوام ببینم جای دیگه ای هم باید کدی رو عوض کنم؟
بهزاد علی بیگی
27 January 2013
احتیاجی به کد دیگری برای مشاهده تغییر فوق نیست.
من خیلی وقته از dw استفاده نمیکنم اما می دونم بسیاری از این شبیه ساز ها برای موبایل درست عمل نمی کنند و تنها نمایش در دستگاه موبایل که یک نمایش واقعی رو میتونه نشون میده
مهسا
28 January 2013
ممنون از پاسختون :)
پدرام
19 March 2013
مطلب مفیدی بود، ولی فقط برای تکست کار میکنه؟ مثلا باکس های موجود در صفحه یا عکسها چطور؟ در مورد سایز اونا چطور عمل میکنه؟
بهزاد علی بیگی
7 April 2013
پدرام جان
برای همه چیز اعمال می شود
reza
23 March 2013
سلام
ممنون بابت زحماتتون
سال نو و نوروزتونم مبارک باشه
به درخواست راهنمایی فوری از محضرتون داشتم و اونم اینه که
این لوگو بالا سمت راستتونو میشه بگید چجوری درست کردید ؟
با inspect element که دیدم بکم پیجیده بود
قبلا به جا دیدم برای Html یه div گذاشته بود و با css کدای عکس و width , height داده بود و برای hover یه دستور background-position : 0 -59px داده بود که الان اینو تست کردم به صورت انیمیشنی کار نکرد
درست بادم نیست
اما ساده بود
ممکنه توضیج بدید
ممنون
بهزاد علی بیگی
7 April 2013
با اجازه امیر سروری عزیز
اگر دقت کنید یک بک گراند 240*160 است که با
:hover
position بک گراند عوض میشه و برای انمیشین از
transition
استفاده شده
رضا
23 March 2013
یه سوال دیگه
استفاده ازین meta tag یعنی دیگه لازم نیست از boot strap استفاده کرد ؟
بهزاد علی بیگی
7 April 2013
اینجا رو ببینید
http://twitter.github.io/bootstrap/getting-started.html
بهنام
11 April 2013
امروز لازمم شد :)
ممنون.
فهیمه
2 August 2013
عالی
ساده و خوب.
ی سوال. پس در کل باید اندازه صفحات رو % وارد کنیم . همیشه همه جا ؟
roimusic
7 June 2014
ممنون مفید بود
راهنما خرید
11 June 2014
خیلی عالی بود
نکاتی جالبی داشت که بدردم خورد.
ایــــــــــــــــــران وردپـــــــــــــرس
15 June 2014
مفید و تاثیر گذار …
ممنون بابت وقتی که گذاشتید
مهدی ربیعی
24 June 2014
سلام
مطلب عالی
یه سوال هم جهت با اموزش شما
در طراحی سایتها، گاهی در نسخه اصلی بخشی رو میبینیم مثل تبلیغات که در نسخه موبایل همون سایت دیگه اون بخش نیست، یعنی دیده نمیشه
برای این کار چه روشی استفاده میشه
یا سایتهایی دیدم که رسپانسیو هستن و استایل نسخه موبایلشون کاملا با نسخه دسکتاپشون متفاوت بوده
آیا تمام استایل رو برای نسخه موبایل با مدیا کوئری از اول نوشته ؟
eve
2 October 2014
تمام استایل از اول نوشته نمیشه . بعضی از قسمت ها که نیاز نیست تو موبایل دیده بشه رو میان با این دستور محو میکنن. مثلا برای صفحه نمایش های کمتر از 480 پیکسل میان کلاس ads رو بر میدارن
@media screen and {max-device-width=480px}
{
.ads{display:none;}
}
pouya
5 July 2014
با سلام
وقتتون بخیر
یه سوال داشتم
من زیاد تو زمینه وردپرس مهارت ندارم
اگه بخوام نسخه موبایل برای وب سایتم درست کنم باید چه کدی رو تو سایت قرار بدم
ممنون میشم راهنمایی کنید
ممنون
eve
2 October 2014
با وجود طراحی واکنش گرا دیگه هیشکی نمیره دنبال نسخه جداگانه برای موبایل . برو دنبال طراحی واکنش گرا(responsive) جوابت رو میگیری
شاپرک
13 July 2014
خیلی ممنون
مفید بود :)
بهمن
8 November 2014
مرسی! مفید بود!
شادی
3 December 2014
thanks a lot.Simple and practical.God bless u
مسعود
12 February 2015
ممنون از مطلب خوبتان
javad
18 May 2015
سلام گوگل 7 هزار ارور viewport برای نسخه موبایل ثبت کرده میشه اون کد استانداردی که دادی رو در متا نیم ها بزارم درست بشه؟
آخه رزبلاگ نسخه موبایل رو نمیشه ویرایش کرد و فقط قالب میشه ویرایش کرد اگه بزارم کار میکنه یا باید در پست ها هم باشه؟؟؟
مرسی اگه جواب بدی
غریب
15 August 2016
با اجازه مدیریت گرامی سایت
دوست عزیز اول باید طراحی واکنش گرا صورت بگیره و برای ابعاد مشخص استایل هایی که باید تغییر کنند مشخص بشن
اما بعد همه این کارها حتما باید از تگی که در این سایت گذاشتن هم استفاده کنید
خود بنده در بعضی صفحات یادم رفته بود بگذارم تگ رو با وجود اینکه اون پیج واکنش گرا بود منتها بدون این تگ گوگل وب مستر برای بنده هم ایراد گرفته بود اما با گذاشتن این تگ مفید ایراد ها کاملا برطرف شد
موفق باشید
امیرعلی
17 July 2015
خیلی ممنون. اصلا به این موضوع توجه نکرده بوم تا اینکه بالاخره به خاطر نبودش به مشکل برخوردم
zahra
1 August 2015
سلام
ببخشید سایتی که روش کار میکنم فقط روی مدل
Samsung Galaxy Y
بد نشون داده میشه، یعنی صفحه فیت نیس و منوها هم نمایش داده نمیشه، یعنی کلا روی رزولوشن 240×320 به پایین مشکل نمایش داره، من باید کدوم مقدارو تغییر بدم؟ یعنی اصن چیکار باید بکنم که روی گوشی های با این رزولوشن هم بدون مشکل صفحه نمایش داده بشه؟
غریب
15 August 2016
سلام واقعا مرسی
توضیحتون بسیار مختصر و مفید بود
جوری که برای همه قابل فهم باشه مرسی و خسته نباشید دوست گرامی
لیلا
16 October 2016
ممنون خیلی عالی بود
محمد
5 February 2017
ممنون مفید بود. اگه سایت ریسپانسیو باشه ولی این متا رو نداشته باشه چی؟
شهرام
24 July 2017
با سلام
من تست میکنم فقط صفحه اول سایتم رو میزنه همون دو خطای معمول رو و خطایview……نمیاد یبکی متون و یکی دکمه ها منتها همونطور که گفتم برای صفحه اول فقط میاد درصورتیکه قاب ادامه مطالبم با صفحه اصلی اصلا فرق نیمکنه هدر همونه فوتر همونه یلوک راست و چپ همونه تگها و مطالب هم در صفحه اصلی 10 تا به ازای هر مطلب اما در صفحه ادامه مطلب مربوط به مطلبه
بنظرتون اشکال از کجا میتونه باشه؟
حسن
6 September 2017
ببخشید آیا به user-scalable میشه مقدار 1 یا 0 داد .؟
برخی از وبسایت دادن که درست هم هست. و w3 validator مشکل نمیگیره.
ساسان
16 November 2017
سپاس
سپهر
4 February 2018
با تشکر از پست تون
لطفا viewport برای css هم توضیح بدید
علی
9 June 2018
داداش ببین یعنی دمت گرما دمممتتتتتت گرررررمممم… اینجا بودی میگرفتم بوست میکردم کره زمینو گشتم اینو پیدا نکردم تو مشکلمو حل کردی.
مهدی
11 March 2019
ممنون از شما – خیلی کمک کرد این مطلب.
علیرضا الله یاری
20 August 2019
سلام
ممنون بابت آموزشتون ، عالی بود!
فقط یه سوال…
مثلا من در css از کد: media screen@ استفاده کردم و تگ viewport هم گذاشتم.
که الان اینطوریه:
تگ ویو پورت:
یکی از کد های ریسپانسیو:
(media (min-width:100px) and ( max-width: 360px@
و در این کد ریسپانسیو مشخص کردم که از 100px تا 360px صفحه رو 360px نشون بده… مثلا اگر یکی که عرض موبایلش 320px باشه به اندازه 360px نشون بده.
ولی مشکلی که من دارم اینه که… کسی که عرض موبایلش 320px هست صفحه براش زوومه و باید زووم اوت کنه تا کامل ببینه.
ممنون میشم راهنماییم کنید.
با تشکر.
مهسا
17 January 2023
چه توضیحات مفیدی بود ، به جای توضیحات پیچیده به صورت عملی به ما توضیح دادید ، خیلی متشکرم