Menu
If we don't use Bootstrap do we need <meta name="viewport" content="width=device-width, initial-scale=1.0"> in <head> of our HTML page?
764
asked Dec 10 '17 19:12
YES. <meta name="viewport" content="width=device-width, initial-scale=1.0"> is completely unrelated to the Bootstrap framework, and should be on every webpage, regardless of what framework you're using.
The viewport META tag allows device width to map to the width CSS property, which essentially means that device pixels correctly map to CSS pixels, allowing elements and fonts to correctly scale on mobile devices. Without this, a pixel is not a pixel in the traditional sense.
Without the viewport META tag, you will have an incredibly hard time ensuring that your website looks the same across various different mobile devices, as most mobile devices have different viewports. Fonts may seem much too big on one device, and much too small on another, even when using percentage-based units of measurement. Apple has great documentation showcasing this in Safari.
In addition to this, Google now audits websites for the viewport META tag through Lighthouse, and making use of it will improve your SEO:
To ensure that your website displays correctly on all mobile devices, make sure to use the viewport META tag with content containing either width, initial-scale or both. Also make use of media queries to fine-tune responsive designs.
CSS Tricks has a helpful list of breakpoints that kick in for specific devices, if you're looking for detailed mobile optimisation, and ViewportSizes has a sheet showcasing 286 different mobile devices and their respective viewport sizes for reference.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
