بدون متا تگ viewport ، دستگاه های تلفن همراه صفحات را در عرض صفحه دسکتاپ معمولی رندر می دهند و سپس صفحات را کوچک می کنند و خواندن آنها را دشوار می کند.
تنظیم متا تگ viewport به شما امکان می دهد عرض و مقیاس دید را کنترل کنید تا اندازه آن در همه دستگاه ها درست باشد.
فانوس دریایی صفحات بدون متا تگ viewport را پرچم گذاری می کند:
یک صفحه در ممیزی با شکست مواجه می شود مگر اینکه همه این شرایط برآورده شوند: - <head>
سند حاوی یک برچسب <meta name="viewport">
است. - متا تگ viewport حاوی یک ویژگی content
است. - مقدار ویژگی content
شامل width=
.
یک تگ Viewport <meta>
با جفت های کلید-مقدار مناسب به <head>
صفحه خود اضافه کنید:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
این چیزی است که هر جفت کلید-مقدار انجام می دهد: - width=device-width
عرض نمای درگاه را با عرض دستگاه تنظیم می کند. - initial-scale=1
سطح بزرگنمایی اولیه را هنگام بازدید کاربر از صفحه تعیین می کند.
در جایی که initial-scale
روی کمتر از 1 تنظیم شده است، این امر میتواند باعث شود مرورگرها یک ویژگی دوبار ضربه زدن برای بزرگنمایی را فعال کنند، که معمولاً برای سایتهای دسکتاپ که برای موبایل بهینهسازی نشدهاند استفاده میشود. این یک تأخیر 300 میلیثانیهای به هر تعامل ضربهای اضافه میکند، در حالی که مرورگر منتظر میماند تا بررسی کند که آیا ضربه دوم «دوباره» اتفاق میافتد یا خیر. بنابراین ممیزی زمانی که مقیاس اولیه روی کمتر از 1 تنظیم شده باشد نیز با شکست مواجه می شود.