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

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