All rules

Sheath rule

best-practices-require-meta-viewport

HTML documents should have a viewport <meta> tag for mobile responsiveness.
Package
Core
Category
Best Practices
Default severity
warning by default
Auto-fix
Manual fix

#Why

The viewport meta tag controls how the page is displayed on mobile devices. Without it:

  • Mobile browsers may render the page at desktop width and zoom out
  • Responsive CSS media queries won't work correctly
  • The page will be difficult to use on mobile devices

#Examples

#Bad

<!-- Missing viewport -->

<head>

    <meta charset="utf-8">

    <title>My Page</title>

</head>



<!-- Empty viewport content -->

<head>

    <meta name="viewport" content="">

</head>



<!-- Missing width -->

<head>

    <meta name="viewport" content="initial-scale=1">

</head>



<!-- A numeric prefix outside the supported range is invalid -->

<head>

    <meta name="viewport" content="width=device-width, initial-scale=20oops">

</head>

#Good

<!-- Standard responsive viewport -->

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Page</title>

</head>



<!-- With additional settings -->

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

</head>

#Options

Use this option to enable or disable validation of the viewport content value.

Option Type Default Description
validateContent boolean true Validate viewport content values 
<?php



'best-practices-require-meta-viewport' => ['warning', ['validateContent' => false]],

#Viewport Values

Start with these viewport values for responsive layouts.

Property Recommended Value Description
width device-width Match device width
initial-scale 1 Initial zoom level
maximum-scale >= 2 or omit Allow at least 200% zoom (accessibility)
user-scalable yes or omit Allow zooming (accessibility)

#Notes

  • A dynamic name value is left for runtime and suppresses the missing-tag diagnostic.
  • A viewport declaration inside Blade control flow must exist on every render path.
  • Every statically visible viewport declaration is validated, including declarations in mutually exclusive branches. Dynamic content values are left for runtime without suppressing validation of static sibling branches.
  • Only documents with a <head> element are checked
  • Static initial-scale, minimum-scale, and maximum-scale values follow HTML viewport numeric-prefix parsing. The parsed number must be between 0.1 and 10; trailing nonnumeric text does not erase a valid numeric prefix.
  • Dynamic Blade content values are not checked as literal values
  • A missing viewport meta tag is not reported when <head> contains dynamic content such as <x-seo>, <s:se_meta>, @include, @stack, @yield, or {!! ... !!}
  • See a11y-no-non-scalable-viewport for accessibility concerns with viewport

#References

#Related Rules