Comments: This article mainly introduces how to prevent mobile devices (mobile phones and tablets) from double-clicking the browser to enlarge the webpage. For more information, see
By default, browsers on mobile phones, tablets, and other mobile devices have double-click amplification settings. How can I avoid double-click amplification?
The meta viewport is provided on the Mobile Page and can be used to set scaling. However, before using viewport, you must change the document type of the page to Mobile type. Generally, the page DTD is An XHTML or simple HTML5 declaration. Mobile devices must use the following declaration.
The Code is as follows: <! DOCTYPE html PUBLIC "-// WAPFORUM // dtd xhtml Mobile 1.0 //" http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">
After the DTD is set, you can use viewport to disable page scaling. Generally, the user-scalable is set to 0 to disable the scaling of the page view.
The Code is as follows: <meta name = "viewport" content = "user-scalable = 0"/>
However, for better compatibility, we will use the complete viewport settings.
The Code is as follows: <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0"/>
For more details about viewport, see MDN.
Https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
It seems that the DTD can only be declared as HTML5, And the viewport label is added below.