مفهوم viewport چیست چرا از تگ viewport در طراحی استفاده میشود؟
واژه “viewport” به معنای اندازه پنجره یا ناحیه قابل مشاهده روی یک صفحه نمایش است. به طور کلی این اصطلاح برای نمایشگرهای دستگاههای همراه مانند تلفنهای هوشمند و تبلتها استفاده میشود.
اصطلاح viewport به یک اِلمان متا در HTML 5 اشاره دارد که نقش مهمی در بهینهسازی و نمایش محتوا در موبایل دارد. این عنصر محتوای نمایش داده شده را مقیاسبندی میکند تا اندازه صفحه نمایش به طور بهینه شده و مناسب استفاده شود. در این حالت عنصر متا viewport تنظیم میکند که تمام محتوا به طور یکسان خوانا و صحیح و کامل بر روی صفحه نمایشهای با اندازههای مختلف نمایش داده شود. عنصر viewport صفحات وب را با طول و عرض صفحه نمایش تطبیق میدهد تا مرورگرهای موبایل بتوانند تمام محتوا را به درستی نمایش دهند.
اطلاعات کلی درباره viewport
به لطف viewport وبسایتها در دستگاههای همراه به همان شیوهای که در صفحه نمایش دسکتاپ نمایش داده میشوند نمایش داده نمیشوند. کاربران نیازی به بزرگنمایی ندارند و میتوانند محتوای یک صفحه را به گونهای مشاهده کنند که با نمایشگر کوچک مطابقت داشته باشد. Viewportها به عنوان عناصر متا (در ترکیب با طراحی وب واکنشگرا) به مرورگرهای وب کمک میکنند تا صفحات را تقسیم کرده و آنها را در صفحه نمایشهای کوچک به گونهای دوباره مونتاژ کنند که کاربران بتوانند یک تصویر معنادار و خوانا را دریافت کنند. بنابراین viewportها وظیفه دارند با تعیین فرمتهای خروجی متناسب با هر دستگاه همراه از مشکلات نمایش جلوگیری کنند.
عملکرد viewport در کد های html و css چطور است؟
میتوان viewportها را به دو روش مختلف در فایلهای HTML خود ادغام کرد
- روش اول : به صورت مستقیم در فایل html
- روش دوم : در یک فایل css به صورت کاملا جداگانه
اگر میخواهید viewport را به عنوان یک تگ متا مستقیماً در فایل HTML خود قرار دهید، میتوانید از کد زیر استفاده کنید:
1 |
<meta name=viewport content="width=device-width, initial-scale=1"> |
در این حالت عرض به گونهای تعریف میشود که با عرض صفحه دستگاه مربوطه تطبیق پیدا کند (width=device-width). Initial-scale نشاندهنده عامل بزرگنمایی اولیه است و نشان میدهد که صفحه شما باید به صورت 1:1 روی صفحه یک دستگاه همراه نمایش داده شود.
پارامتر های viewport
width
این پارامتر مهمترین پارامتر متا تگ viewport محسوب میشود و تعیین میکند عرض وبسایت چقدر است. با مقدار width=device-width عرض وبسایت را برابر با عرض صفحه نمایش دستگاه در نظر گرفته می شود. همچنین میتوان یک عدد مشخص مانند width=500px برای مشخص کردن عرض صفحه وارد کرد.
height
این پارامتر طول وبسایت را مشخص میکند مانند پارامتر قبلی میتوان با مقدار width=device-height طول وبسایت را به اندازه طول صفحه نمایش کاربر در نظر گرفت که توصیه نمیشود عدد مشخصی برای آن وارد کنید.
initial-scale
این پارامتر اندازه زوم (بزرگنمایی) اولیه صفحه را موقع اولین بارگذاری مشخص میکند. initial-scale=1 از زوم پیش فرض مرورگرها جلوگیری میکند.
minimum-scale
این پارامتر بیشترین مقدار زومی که کاربر میتواند در سایت انجام دهد مشخص میکند. به عنوان مثال اگر از maximum-scale=1 استفاده شود یعنی کاربر نمیتواند در سایت هیچ زومی انجام دهد. از آنجایی که در بسیاری از مواقع در صفحات کوچک موبایلها کاربرها نیاز به زوم دارند بهتر است این پارامتر تنظیم نشود.
maximum-scale
این پارامتر برعکس پارامتر قبلی است و تعیین میکند که کاربر تا چه اندازه امکان کوچک نمایی (zoom out) دارد.
user-scalable
این پارامتر امکان زوم توسط کاربر را تعیین میکند و دو مقدار Yes و No را میپذیرد. اگر از User-scalable=No استفاده کنید به این معنی است که کاربر هیچ زومی نتواند انجام دهد که توصیه میشود این کار را نکنید. بهتر است از User-scalable=Yes استفاده کنید یا بهطورکلی از این پارامتر استفاده نکنید تا کاربر امکان زوم در سایت شما را داشته باشد.
interactive-widget
این پارامتر به تاثیر ویجتهای تعاملی مانند کیبوردهای مجازی روی صفحه میپردازد. مقادیری که این پارامتر دریافت میکند شامل resizes-visual ، resizes-content و overlays-content است.
همچنین میتوانید از viewport برای تعریف ارتفاع و تنظیم یک عامل بزرگنمایی حداقل و/یا حداکثر استفاده کنید. علاوه بر این تگ متا میتواند از بزرگنمایی کاربران (user-scalable=no) جلوگیری کند.
اگر viewport را به جای استفاده مستقیم در سند html در یک فایل CSS تنظیم کنید باید آن را درست در ابتدای فایل قرار دهید تا نمایش صحیح را تضمین کنید در اینجا یک مثال از نحوه ظاهر شدن آن کد آورده شده است:
1 2 3 |
@viewport { width: device-width; } |
واحد ها و معنی آنها
vh مخفف viewport height است. این واحد بر اساس ارتفاع viewport است. مقدار 1vh برابر با 1% ارتفاع viewport است. مقدار 100vh برابر با 100% ارتفاع viewport است.
vw مخفف viewport width است. این واحد بر اساس عرض viewport است. مقدار 1vw برابر با 1% عرض viewport است.
vmin مخفف viewport minimum است. این واحد بر اساس کوچکترین بعد viewport است. اگر ارتفاع viewport کوچکتر از عرض باشد، مقدار 1vmin برابر با 1% ارتفاع viewport خواهد بود. به طور مشابه اگر عرض viewport کوچکتر از ارتفاع باشد، مقدار 1vmin برابر با 1% عرض viewport خواهد بود.
vmax مخفف viewport maximum است. این واحد بر اساس بزرگترین بعد viewport است. اگر ارتفاع viewport بزرگتر از عرض باشد، مقدار 1vmax برابر با 1% ارتفاع viewport خواهد بود. به طور مشابه اگر عرض viewport بزرگتر از ارتفاع باشد مقدار 1vmax برابر با 1% عرض viewport خواهد بود.
خطا های احتمالی
مشکل اصلی با viewportها این است که تعداد دستگاههای همراه با ابعاد مختلف در حال افزایش است این یعنی شما تلفن ها و یا به صورت کلی اسکرین هایی با سایز های مختلف را در بازار مشاهده می کنید. با این حال برای دستیابی به یک نمایش بهینه در تمام دستگاههای موجود، ابزارها و نرمافزارهای مختلفی برای بررسی نمایش صحیح در دستگاههای همراه استاندارد وجود دارد. این ابزارها به عنوان مثال iOS MIH-Tool، Ghostlab و Adobe Edge Inspect هستند. اما بهترین ابزار شاید حالت Mobile View مرورگر کامپیوتر است که می توانید از آن برای مشاهده سند خود در سایز ها و حالت های مختلف استفاده کنید.