Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does MDN suggest using initial-scale=0.86 and minimum-scale=0.86 in viewport tag to suppress horizontal scroll?

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.

  1. Are there really many smartphones that apply zoom? If yes, please give a few examples.
  2. Where does the number 0.86 come from? Any references?
like image 956
user31782 Avatar asked Aug 05 '21 09:08

user31782


People also ask

What is the initial-scale=1 part of the viewport meta tag?

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.

What is the initial-scale=1 part of the page tag?

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:

What is initial-scale property in HTML?

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.

What is initial scale and maximum scale in SharePoint?

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.


1 Answers

I will focus on the references part.

This is the PR: https://github.com/mdn/content/pull/612

Author and description:

enter image description here

Changes can be found at https://github.com/mdn/content/pull/612/files

A glance:

enter image description here

The commit: https://github.com/mdn/content/pull/612/commits/0e98d81de11f8c8b07e3936e54b708b91aa8757f

like image 134
Lajos Arpad Avatar answered Sep 29 '22 07:09

Lajos Arpad