بدون متا تگ viewport ، دستگاه های تلفن همراه صفحات را در عرض صفحه دسکتاپ معمولی رندر می دهند و سپس صفحات را کوچک می کنند و خواندن آنها را دشوار می کند.
تنظیم متا تگ viewport به شما امکان می دهد عرض و مقیاس دید را کنترل کنید تا اندازه آن در همه دستگاه ها درست باشد.
چگونه ممیزی متا تگ Lighthouse viewport شکست می خورد
فانوس دریایی صفحات بدون متا تگ viewport را پرچم گذاری می کند:
یک صفحه در ممیزی با شکست مواجه می شود مگر اینکه همه این شرایط برآورده شوند: - <head> سند حاوی یک برچسب <meta name="viewport"> است. - متا تگ viewport حاوی یک ویژگی content است. - مقدار ویژگی content شامل width= .
نحوه افزودن متا تگ viewport
یک تگ 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 سطح بزرگنمایی اولیه را هنگام بازدید کاربر از صفحه تعیین می کند.
مقیاس اولیه کمتر از 1
در جایی که initial-scale روی کمتر از 1 تنظیم شده است، این امر می‌تواند باعث شود مرورگرها یک ویژگی دوبار ضربه زدن برای بزرگنمایی را فعال کنند، که معمولاً برای سایت‌های دسکتاپ که برای موبایل بهینه‌سازی نشده‌اند استفاده می‌شود. این یک تأخیر 300 میلی‌ثانیه‌ای به هر تعامل ضربه‌ای اضافه می‌کند، در حالی که مرورگر منتظر می‌ماند تا بررسی کند که آیا ضربه دوم «دوباره» اتفاق می‌افتد یا خیر. بنابراین ممیزی زمانی که مقیاس اولیه روی کمتر از 1 تنظیم شده باشد نیز با شکست مواجه می شود.