نما (Viewport)
«تگ viewport» یعنی به مرورگر بگوییم صفحه را چطور مقیاس کند. «نما (Viewport)» همان بخش قابل مشاهده صفحه است. روی موبایل کوچک تر است. با این تگ، عرض صفحه برابر عرض دستگاه می شود و زوم اولیه درست می ماند.
تنظیم تگ viewport
این کد را داخل head بگذار. سپس صفحه روی همه دستگاه ها درست اندازه می شود.
<!-- head -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- محتوای نمونه و قانون های کمکی -->
<img src="photo.jpg" alt="نمونه" style="max-width:100%;">
<style>
/* از اسکرول افقی جلوگیری کن */
.container {
width: 100%;
}
img,
video {
max-width: 100%;
}
</style>
قواعد اندازه گذاری محتوا
از عناصر عریضِ ثابت پرهیز کن. زیرا اسکرول افقی می آورد. بنابراین عرض ها را نسبی بگذار. همچنین چیدمان را وابسته یک عرض خاص نکن.
در نهایت، برای صفحه های کوچک و بزرگ، با «مدیاکوئری (Media Query)» استایل متفاوت بده. این کار خوانایی را بهتر می کند.
گام های عملی سریع
- تگ viewport را داخل head بگذار.
- عرض عناصر را نسبی کن.
- برای نقاط شکست، مدیاکوئری بنویس.
- روی موبایل و دسکتاپ تست کن.
نکته: اگر صفحه مجبور به زوم یا اسکرول افقی شد، مقادیر ثابت را بررسی کن.
جمع بندی سریع
- تگ viewport مقیاس را کنترل می کند.
- عرض نسبی؛ اسکرول افقی ممنوع.
- مدیاکوئری برای اندازه های مختلف.
- همیشه روی چند دستگاه تست کن.
ادامه بحث را در طراحی واکنش گرا ببین. همچنین الگوها را در چیدمان 12 ستونه بررسی کن. برای مرور سریع، این صفحه تگ viewport را نشانه گذاری کن.