- Getting Started
- AMP HTML Validator
- Accessibility assessment with aXe
- Avoid HTTP redirects in requests
- Avoid exceeding CSS stylesheet limits
- Babel configuration is valid
- Babel configuration rules set
- Check `devtool` property in webpack configuration
- Check for broken links
- Check if the TypeScript target is appropiated
- Check if webpack configuration file exists
- Check if webpack is installed
- Disallow `P3P` headers
- Disallow certain HTTP headers
- Disallow non-standard file extension for the web app manifest file
- Disallow protocol-relative URLs
- Disallow small error pages
- Disallow unneeded HTTP headers for non-HTML resources
- Enable consistent casing in TypeScript configuration
- Enable import helpers in TypeScript configuration
- Enable remove comments in TypeScript configuration
- Enable strict option in TypeScript configuration
- HTTP Cache
- Image optimization with Cloudinary
- No vulnerable libraries
- Nu HTML Test
- Performance budget
- Require `Content-Type` HTTP response header with appropriate value
- Require `Strict-Transport-Security` response header
- Require `X-Content-Type-Options` HTTP response header
- Require a 'theme-color' meta tag with a valid value
- Require a web app manifest file
- Require an apple touch icon
- Require charset meta tag with the value of `utf-8`
- Require external links to disown opener
- Require highest available document mode
- Require https for you site and assets
- Require manifest to specify the web site/app name
- Require resources to be served compressed
- Require scripts and styles to use subresource integrity
- Require valid manifest
- Require viewport meta tag with proper value
- SSL Server Test
- TypeScript configuration is valid
- TypeScript configuration rules set
- Validate `Set-Cookie` Header
- Validate `module` property in TypeScript has the appropiate value for webpack
- Validate `modules` property in Babel has the appropiate value for webpack
- Warn if the byte-order mark
- webpack configuration is valid
- webpack configuration rules set
- Further configuration
meta-viewport warns against not having a single
tag in the
<head> with the proper value.
The viewport meta tag is an essential part of responsive web design, that may also offer some performance improvements.
Mobile browsers render pages in a virtual “window” (the viewport), usually wider than the screen, so they don’t need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Mobile Safari introduced the “viewport meta tag” to let web developers control the viewport’s size and scale. Many other mobile browsers now support this tag.
In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites.
NOTE: If your website is not responsive, then this meta tag might not be needed.
Ideally the following meta
viewport tag should be used:
<meta name="viewport" content="width=device-width, initial-scale=1">
Or, if most of your users don’t use Safari for iOS < 9:
<meta name="viewport" content="width=device-width">
It is recommended to use:
device-widthwill make the page match the screen’s width in device-independent pixels, allowing its content to reflow to match different screen sizes.
widthproperty to a specific size (e.g.:
width=320) is not recommended.
width=device-widthalso constitutes a performance improvement, as under most circumstances, it enables fast tapping, removing the 300-350 ms tap delay on Safari for iOS 10+ and other mobile browsers.
This is mostlly needed to work around the orientation change bug from Safari for iOS > 9.
Using values different then
1.0) are problematic.
minimum-scaleproperties should not be used.
These properties can block the user from zooming on a page. With such a wide range of devices available with different display dimensions, screen resolutions, pixel densities, etc., it is difficult to choose an appropriate text size in a design. Most of the time using these properties enable users to pick a text size that is unreadable while preventing them from zooming, frustrating them, or making the web site/app inaccessible in some cases.
Considering the issues described, these properties are now ignored by some mobile browsers such as Safari for iOS 10+.
The rule checks if the
viewport meta tag was specified a single
time in the
<head>, and if:
widthproperty is provided and its value is
initial-scaleproperty is provided (note: depends on the configurations) and its value is
- it includes unknown properties (e.g.:
x=y) or invalid values (
viewport meta tag is not specified in
viewport meta tag contains an unknown property:
<meta name="viewport" content="unknown-property=1, width=device-width, initial-scale=1">
viewport meta tag contains an invalid value:
<meta name="viewport" content="width=invalid-value, initial-scale=1">
viewport meta tag contains a disallowed property (
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
viewport meta tag contains a fixed
<meta name="viewport" content="width=320, initial-scale=1">
viewport meta tag contains
initial-scale with a value
<meta name="viewport" content="width=device-width, initial-scale=5">
There are multiple
viewport meta tags:
If versions of Safari for iOS < 9 are targeted:
If versions of Safari for iOS 9+ are targeted:
That this rule takes into consideration the targeted
browsers, and if no
versions of Safari for iOS < 9 are included, it will
To use it you will have to install it via
npm install @sonarwhal/rule-meta-viewport
Note: You can make
npm install it as a
devDependency using the
parameter, or to install it globally, you can use the
-g parameter. For
other options see
And then activate it via the