Viewport چیست؟

viewport  منطقه قابل مشاهده کاربر در یک صفحه وب است.
viewport  در دستگاه ها متفاوت است و در تلفن همراه کوچکتر از یک صفحه رایانه است.
قبل از تبلت ها و تلفن های همراه، صفحات وب فقط برای صفحه های رایانه طراحی شده بود و برای صفحات وب معمولی است و طراحی ثابت و اندازه ثابت دارد.
سپس، هنگامی که ما شروع به گشت و گذار در اینترنت با استفاده از تبلت و تلفن همراه ، صفحات اندازه ثابت اندازه بیش از حد بزرگ بود به متناسب با viewport. برای برطرف کردن این، مرورگرهای آن دستگاهها تمام صفحه وب را متناسب با صفحه کاهش دادند.

تنظیمات viewport

HTML5 یک روش به طراحان وب از طریق نمایشگر <meta> را بر روی نمایشگر معرفی کرد.

شما باید عنصر <meta>  در viewreport زیر را در تمام صفحات وب خود وارد کنید:

عنصر <meta> viewport دستورالعمل های مرورگر را در مورد نحوه کنترل ابعاد صفحه و مقیاس بندی ارائه می دهد.

بخش width = device-width عرض صفحه را تعیین می کند تا به عرض صفحه نمایش دستگاه (که بسته به دستگاه متفاوت است) را دنبال کند.

مقیاس initial-scale=1.0 مقدار اولیه زوم را تنظیم می کند زمانی که صفحه اول بارگذاری شده توسط مرورگر باشد.

در اینجا یک مثال از یک صفحه وب بدون meta tag viewport و یک صفحه وب با meta tag viewport است.

روی مشاهده مثال کلیک کنید و اندازه مرورگر را تغییر دهید تا تغییرات را مشاهده کنید

روی مشاهده مثال کلیک کنید و اندازه مرورگر را تغییر دهید تا تغییرات را مشاهده کنید

اندازه محتوا در viewport

کاربران برای استفاده از وب سایت ها به صورت عمودی در هر دو دستگاه دسکتاپ و تلفن همراه استفاده می شوند - اما نه به صورت افقی!
بنابراین، اگر کاربر مجبور به حرکت به صورت افقی یا زوم شود، برای دیدن کل صفحه وب، یک تجربه کاربری ضعیف را تجربه می کند.

برخی از قوانین اضافی:

1. از عناصر بزرگ ثابت استفاده نکنید - برای مثال، اگر یک تصویر در عرض نسبت به نمایشگر نمایش داده شود، می تواند نمای مرورگر را به صورت افقی حرکت دهد. به خاطر داشته باشید که این محتوا را متناسب با عرض نمایشگر تنظیم کنید.
2. اجازه ندهید که محتوا به یک پیکره عرضی خاص بپردازد تا به خوبی رندر شود. از آنجا که ابعاد و عرض پیکسلهای صفحه در پیکسلهای CSS به طور وسیعی بین دستگاهها متفاوت است، محتوا نباید روی عرض پانل نمایش خاصی تکیه کند تا خوب ظاهر شود.
3. استفاده از media queries  برای استفاده از یک ظاهر متفاوت برای صفحه نمایش های کوچک و بزرگ استفاده کنید. تنظیم عرض های کامل CSS مطلوب برای عناصر صفحه باعث می شود که عنصر برای نمایشگر در دستگاه کوچکتر بیش از حد گسترده باشد. در عوض، استفاده از مقادیر عرض نسبی، مانند عرض: 100٪ را در نظر بگیرید. همچنین از استفاده از مقادیر مطلق موقعیت موقعیت مطلوب مراقب باشید. ممکن است این عنصر در خارج از viewport  در دستگاه های کوچک قرار بگیرد.