جلسه ۶۴ : تعیین اندازه صفحه با viewport در CSS

• جزئیات
• نوع مطلبآموزشی

مقدمه

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

در آموزشهای قبلی مباحث css ، مضوعات مهم و کاربردی در مورد افکت گذاری و کار با جلوه های ویژه تحت عناوین کار با افکت های سایه در css ، کار با ویژگی Transitions در css و کار با ویژگی انیمیشن در css و افکت گذاری عکس ها در css را ارائه کردیم.

همچنین در مورد تنظیم فضای بین عناصر html نیز مباحث آموزشی  کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css  را نیز ارائه کردیم.

در ادامه آموزشهای جامع css. در این پست. ما به موضوع آموزش استفاده از تنظیمات viewport در css ، می پردازیم.

viewport

آموزش استفاده ازتنظیمات viewport در css

برای استفاده از تنظیمات viewport در صفحات وب، باید در تگ های  html5 از تنظیمات تگ <meta> استفاده کنید. تا html اجازه اعمال تنظیمات viewport  را به طراحان وب بدهد. برای این منظور باید یگ تگ <meta> ، با نام “viewport” ، در بخش head صفحه وب ایجاد کنید:

تگ <meta> در واقع ساختار مرورگر را برای بررسی چگونگی تغییر دادن ابعاد صفحه و اندازه آن دریافت می کند.

کد width=device-width عرض صفحه وب را با عرض صفحه نمایش تنظیم می کند.

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

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

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

برخی از قوانین ضروری که باید در صفحات وب رعایت شود:

۱- از عناصر html با عرض بزرگ و ثابت (fixed) استفاده نکنید.

۲-اجازه ندهید که محتوا فقط روی قسمتی از عرض viewport ، خوب ظاهر شود.

۳- حتما سعی کنید از ابزار css ، برای ایجاد style های مختلف در صفحات موبایل و دسکتاپ استفاده کنید.