Today, two days before the test did show pictures full-screen function, it suddenly found that when I entered the full-screen images, full-screen display after canceling two fingers after Zoom, the entire page will be enlarged. This is not user-friendly! So I went to search the search browser native pinch-relevant information, after browsing many pages, finally we found a solution.
Before discussing solutions, to explain the name for the viewport meta tags it, this tag is often used to fit page zoom, which has the following attributes
width: the width of the viewport for controlling (html tags can be understood as the width of the parent element) may be set to a value or device-width. Usually set to device-width, scaled to the width of the screen to refer to the CSS 100% measured in pixels.
height: similar width
initial-scale: to control the zoom level at the time of the initial page load, usually set to 1
maximum-scale: maximum zoom level control
minimum-scale: control the minimum zoom level
user-scalable: control whether users can zoom a page, it is yes or no, default is yes
More information from MDN
Many solutions are all set zoom level 1 zoom and prohibited, so he wanted me, after scaling Sets the maximum zoom level 1 what will happen, then go to test the code, when you close the full-screen picture, set the maximum zoom level 1.
Open the browser test, close the enlarged picture, page zoom to level 1, perfect. But after this set, the second time to show full-screen picture, you can not scale the image, so they need to enter fullscreen display pictures, cancel the maximum zoom level.
At this time, the page will complete the automatic zoom feature to level 1 after closing the full-screen images and cancel the scaling limit after opening a full-screen display pictures again. However, if the user does not open a full-screen display after the page is loaded pictures? In this case the user can freely zoom okay page, in order to prevent user errors, we need to set the maximum zoom level 1, so that just finished loading the page when they can not be scaled to a level above 1 in the label.