طراحی وب واکنش‌گرا - ویدئو

viewport چیست؟

viewport (viewport) فضایی است که کاربر در صفحه وب می‌تواند مشاهده کند.

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

قبل از تبلت‌ها و تلفن‌های موبایل، وب‌سایت‌ها فقط برای صفحه نمایش کامپیوتر طراحی شده بودند و طراحی ثابت و اندازه ثابت وب‌سایت‌ها بسیار رایج بود.

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

این کامل نیست! یک راهنمای سریع است.

تنظیم viewport

HTML5 روشی را معرفی کرده است که طراحان وب می‌توانند <meta> برچسب‌ها برای کنترل viewport.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

در زیر مثال‌هایی از وب‌سایت‌هایی است که بدون برچسب meta viewport هستند و همچنین وب‌سایت‌هایی که با برچسب meta viewport هستند:

توجه:اگر از تلفن یا تبلت برای مشاهده این صفحه استفاده می‌کنید، می‌توانید بر روی دو لینک زیر کلیک کنید تا تفاوت‌ها را مشاهده کنید.



بدون برچسب viewport


با برچسب viewport

محتوای را به اندازه صفحه نمایش تنظیم کنید

عادت کاربران این است که وب‌سایت‌ها را در کامپیوترهای رومیزی و دستگاه‌های موبایل به صورت عمودی بچرخانند، نه افقی!

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

باید برخی قوانین اضافی را رعایت کرد:

1. از عناصر عرض ثابت بزرگ استفاده نکنید - به عنوان مثال، اگر عرض عکس از عرض视ور بیشتر باشد، ممکن است باعث بسته شدن视ور عمودی شود. لطفاً مطمئن شوید که این محتوا به اندازه视ور مناسب است.

2. محتوا نباید وابسته به وضوح خاصی برای نمایش مناسب باشد - به دلیل اینکه اندازه و عرض صفحه و ویدئوها در دستگاهها بین آنها بسیار متفاوت است، بنابراین محتوا نباید به وضوح خاصی برای نمایش مناسب وابسته باشد.

3. از جستجوهای رسانه‌ای CSS برای استفاده از سبکهای مختلف برای صفحه‌های کوچک و بزرگ استفاده کنید - تنظیم اندازه CSS absolute width برای عناصر صفحه به اندازه زیادی منجر به اینکه این عناصر برای视ورهای دستگاه‌های کوچک بسیار وسیع شوند می‌شود. به جای آن باید به فکر استفاده از مقادیر عرض نسبی، مانند width: 100%، بود. همچنین باید از تنظیمات absolute positioning بزرگ احتیاط کرد، زیرا ممکن است باعث شود عناصر به خارج از视ور دستگاه‌های کوچک برسند.