بسیاری از موتورهای جستجو صفحات را بر اساس میزان سازگاری آنها با موبایل رتبه بندی می کنند. بدون متا تگ 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 سطح بزرگنمایی اولیه را هنگام بازدید کاربر از صفحه تعیین می کند.