زماني که از طراحي واکنشگرا و يا ساخت نسخه موبايل وب سايت سخن به ميان مي آيد مي بايست از روش هايي استفاده کنيم که قبلا براي ساخت نسخه معمولي وب سايت با آنها برخورد نکرده بوديم.يکي از اين موارد استفاده از متا تگ 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 با ويژگي هاي کاملش نمايش داده مي شود :
1
<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 استاندارد را مي توان به صورت زير نوشت:
1
<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 را مي دهد و يا نمي دهد.
البته متا تگهاي ناشناخته ديگري هم وجود دارند که در بعضي طراحی وب سایت از استانداردها براي نمايش نسخه موبايل استفاده مي شوند که البته همه آن را پشتيباني نمي کردند و ما در اينجا تنها به آنها اشاره مي کنيم.
1
2
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
البته همان طوري که گفته شد با توجه به پشتيباني زياد از تگ viewport ديگر نيازي به استفاده از متا تگ هاي ديگر نيست.حالا اگر بخواهيد مي توانيد تا حدي نسخه موبايل وب سايت خود را بسازيد. اينک با يکي از چالش هاي ساخت نسخه موبايل وب سايت ها آشنا شديد به نظر شما در ساخت يک نسخه موبايل چه چالش هاي ديگري سر راه است؟
طراحی وب سایت