طراحی وب واکنش گرا در CSS - Viewport

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


Viewport چیست؟

Viewport ناحیه قابل مشاهده ی صفحه وب برای کاربر است.[۱]

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

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

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

بهترین راه حل نبود!! اما یک راه حل سریع بود.

تنظیم Viewport

HTML5 متدی معرفی کرد تا به طراحان وب اجازه کنترل viewport را، از طریق تگ <meta> بدهد.

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

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


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

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

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

در اینجا مثالی از یک صفحه وب بدون تگ meta viewport وجود دارد، و همین صفحه وب نیز با تگ meta viewport وجود دارد:

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

بدون تگ meta viewport

با تگ meta viewport

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

پیش از این، کاربران وب‌سایت‌ها را هم در رایانه‌های رومیزی و هم موبایل‌ها به صورت عمودی پیمایش (Scroll) می کردند- اما نه افقی.

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

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

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

منابع آموزشی