مشخص کنید چگونه وب‌سایت شما بر روی تلفن‌های هوشمند نمایش داده‌شود
با ظهور گوشی‌های هوشمند و ریدرها استفاده از این دستگاه‌های همراه برای خوندن وب‌سایت ها و نوشته‌ها به‌صورت شگفت‌انگیزی در حال افزایش روز افزونه. بنابراین شاید شما خواهان این باشین که مطمئن بشین وب‌سا‌یتتون روی این دستگاه‌ها به درستی نمایش داده میشه. یکی از راه‌هایی که شما می‌تونین با استفاده از اون این اطمینان خاطر رو برای خودتون ایجاد کنین استفاده از متا تگ Viewport هست. این یه تگ استاندارده که توسط شرکت اپل برای گوشی‌های آیفون توسعه داده شد. درحال حاضر این تگ توسط سیستم‌عامل های IOS و Android پشتیبانی میشه. این تگ این اجازه رو به شما میده که سطح زوم رو هنگام بارگذاری تعیین کنین، یعنی کاربر چجوری سایت‌تون رو ببینه. تا چه حد از قالب‌تون در داخل و یا خارج کادر قرار بگیره و یا اصلا اگه دوس دارین زوم رو غیر فعالش کنین.
به عنوان مثال برای اینکه عرض سایت‌تون رو با زوم ۱٫۰x و جابجایی رو بین ۰٫۶x و ۲٫۴x تعیین کنین به کد زیر نیاز دارین که باید به فایل سربرگ پوسته، یعنی همون header.php اضافه بشه.
به عنوان یه مثال دیگه، برای مشخص کردن طول و عرض ۶۴۰ در ۹۶۰ پیکسل برای دستگاه از کد زیر استفاده می‌کنیم و از زوم کردن جلوگیری می‌کنیم. به کد زیر نگاه کنین:
جزئیات بیشتری در مورد تگ viewport در بخش توسعه‌دهندگان سایت اپل وجود داره که بهتره یه سری به اون‌جا هم بزنین. به عنوان مثال داشتن یک نوار وضعیت مشکی وقتی که دارین با موبایل سایت رو نگاه می‌کنین یا مشاهده سایت به صورت فول‌اسکرین یا تمام صفحه که کدش رو در زیر مشاهده می‌کنین: