Meta tag implementation prevents mobile device (mobile phone, Pad) browser double click to enlarge Web page

I. BACKGROUND

In today's increasingly rapid development of mobile devices, and increasingly mature technology, mobile devices become an important area of enterprise expansion business, followed by the mobile phone to adapt to the endless, in the development process, we often encounter a very embarrassing problem: Mobile Web page when users double-click the screen will become larger , causing the layout of the entire page to be wrong and affecting the final effect, here's a way to prevent this from happening by using the META tag of HTML.

Ii. Solutions and principles

1. First set up the DOCTYPE of the webpage

1 <! DOCTYPE HTML > 2 < HTML > 3 .... 4 </ HTML >

2. Add the viewport meta tag to the head of the webpage as follows:

1 <  name= "Viewport"  content2                                      3                                       4                                      user-scalable=no ">

The Width property controls how wide the device is. Assuming your site will be browsed by a device with a different screen resolution, setting it to device-width will ensure that it renders correctly on different devices.

initial-scale=1.0 ensures that when the page loads, it is rendered at a scale of 1:1 without any scaling.

User-scalable=no can disable its zoom (zooming) feature on the mobile device browser.

Maximum-scale=1.0 is typically used with user-scalable=no. By disabling the zoom feature, users can only scroll the screen to make your site look more like the native app.

Iii. Summary

After this setting is complete, we have finished blocking the mobile device on the double-click causes the page to enlarge so that the page layout of the problem, there is wood is very happy?

Meta tag implementation prevents mobile device (mobile phone, Pad) browser double click to enlarge Web page