I've been revisiting the viewport tag on MDN and in article Viewport width and screen width, they suggest:
Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86"
The MDN page was last modified on Jul 27, 2021. I've always used initial-scale:1
for my work and have never come across any mobile device which applies zoom to it.
0.86
come from? Any references?The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
The initial-scale property governs the zoom level when the page is loaded for the first time. Note: The meta tag should be added in the head tag in HTML document. A Responsive tags has the following attributed: width: Width of the virtual viewport of the device. height: Height of the virtual viewport of the device.
initial-scale: Zoom level when the page is first visited. minimum-scale: Minimum zoom level to which a user can zoom the page. maximum-scale: Maximum zoom level to which a user can zoom the page. user-scalable: Flag which allows the device to zoom in or out. (value= yes/no). course.
I will focus on the references part.
This is the PR: https://github.com/mdn/content/pull/612
Author and description:
Changes can be found at https://github.com/mdn/content/pull/612/files
A glance:
The commit: https://github.com/mdn/content/pull/612/commits/0e98d81de11f8c8b07e3936e54b708b91aa8757f
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