Responsive Web Design – The Viewport

طراحی واکنش‌گرا (Responsive Web Design)

طراحی واکنش‌گرا روشی برای طراحی وب‌سایت است که هدفش ایجاد تجربه‌ای بهینه برای مشاهده سایت در انواع دستگاه‌هاست؛ چه دسکتاپ، تبلت یا گوشی موبایل. سایت به طور خودکار اندازه، چیدمان، تصاویر و محتوا را بر اساس اندازه و جهت صفحه نمایش تنظیم می‌کند.

اصول اصلی طراحی واکنش‌گرا:

* استفاده از شبکه‌های انعطاف‌پذیر (fluid grids)
* تصاویر و رسانه‌های انعطاف‌پذیر
* استفاده از media queryهای CSS

—

ویوپورت (The Viewport)

ویوپورت به ناحیه قابل مشاهده صفحه وب در صفحه نمایش دستگاه گفته می‌شود. یعنی بخشی از صفحه که کاربر می‌تواند ببیند.

* در دسکتاپ‌ها، ویوپورت معمولاً همان اندازه پنجره مرورگر است.
* در دستگاه‌های موبایل، ویوپورت کوچکتر و متناسب با اندازه و رزولوشن صفحه نمایش است.

—

اهمیت ویوپورت در طراحی واکنش‌گرا

مرورگرهای موبایل به طور پیش‌فرض صفحات وب را با یک ویوپورت بزرگ‌تر از اندازه واقعی صفحه نمایش نشان می‌دهند که باعث می‌شود سایت روی موبایل خیلی کوچک و دورنمایی دیده شود.

برای کنترل این موضوع، از **تگ متا ویوپورت** در HTML استفاده می‌کنیم.

—

تگ متا ویوپورت

“`html
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
“`

width=device-width: عرض ویوپورت را برابر با عرض صفحه نمایش دستگاه تنظیم می‌کند.
initial-scale=1:  سطح بزرگنمایی اولیه صفحه را تنظیم می‌کند.

این تگ به مرورگر می‌گوید که صفحه را با رزولوشن واقعی دستگاه نمایش دهد تا CSS واکنش‌گرا به درستی کار کند.

—

 خلاصه

* ویوپورت ناحیه قابل مشاهده صفحه وب است.
* تنظیم درست ویوپورت برای طراحی واکنش‌گرا بسیار مهم است.
* از تگ متا ویوپورت برای کنترل نحوه نمایش صفحه در دستگاه‌های مختلف استفاده می‌کنیم.