متا تگ ویو پورت و رفع ارور (veiwport tag not configured )

متا تگ ها تگ هایی فوق العاده کاربردی هستند که عدم استفاده از آن کم اعتبار کردن سایت را به همراه خواهد داشت و متا تگ ویو پورت و رفع ارور (veiwport tag not configured ) که موضوع بحث ماست برای موبایل فرندلی کردن سایت مبحثی فوق العاده مهم است….

متا تگ ویو پورت و رفع ارور (veiwport tag not configured )

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

مطالب مرتبط

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *