What is Viewport
Mobile browsers place the page in a virtual window (viewport). Usually, the virtual window (viewport) is wider than the screen, so that each web page does not have to squeeze each web page into a very small window (this will destroy the layout of the web page that is not optimized for mobile browsers). Users can see different parts of the web page through panning and zooming. The mobile version of Safari browser has recently introduced the meta tag of viewport, which allows web developers to control the size and zoom of viewport, and other mobile browsers also basically support it.
Viewport Basics
The viewport meta tag of a commonly used page optimized for mobile web pages is roughly as follows:
<meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1″>
width: Controls the size of the viewport, which can be specified if 600, or a special value, such as device-width, is the width of the device (units of the pixels of the CSS when scaled to 100%.
height: corresponds to width, specify the height.
initial-scale: initial scaling, that is, the scaling ratio when the page is loaded for the first time.
maximum-scale: The maximum scale that allows the user to scale.
minimum-scale: The minimum scale that allows the user to scale.
user-scalable: Can the user manually scale
Some questions about viewport
Viewport is not just a unique attribute on iOS, but also a viewport on Android and winphone. The problem they want to solve is the same, that is, ignore the real resolution of the device and directly through the dpi, resetting the resolution between the physical size and the browser, which has nothing to do with the resolution of the device. For example, you can get an iPhone3 gs with 3.5-inch-320 * 480, iPhone4 with 3.5-inch-640 * 960, iPhone4 with 9.7-inch-1024*768, and iPad2 with different resolutions and physical sizes, you can set the viewport to make them have the same resolution in the browser. For example, your website is 800px wide, you can set the width=800 of viewport to make your website display your website on these three different devices just full screen.
I believe that every student who has a little understanding of viewport should have already understood the above knowledge. This is not the point I want to talk about today. What I want to illustrate is some of the differences in viewport performance on iOS and Android.
When searching for the online knowledge about viewport, it is basically all the following information:
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no />
This code means that the width of the viewport is equal to the real resolution on the physical device and does not allow the user to scale. This is how the mainstream web apps in Yidu are set. Its function is to deliberately abandon the viewport and not scale the page. In this way, the dpi must be the same as the real resolution on the device. Without any scaling, the web page will appear higher and more delicate. Students who play PS should know what it will become when you zoom a picture of 1000 * 1000 directly to 500 * 500 points, right? The distortion of the picture must not be escaped.
But the application I want to do is the opposite, and it needs to use viewport and zoom. No matter what the real resolution is or what the physical size is, I hope that there will be a unified resolution in the browser, and that the user will not be allowed to zoom. The devices I used to test are: iphone4, ipad2, htc g11, aquos phone (android system), asus android pad, dell winphone, and I encountered the following problems along the way:
1) If viewport is set without display, then the default width is 980. If all elements of the page are less than 980, then width is 980. If the width of the page exceeds 980, then width is equal to the maximum width. In short, the entire page can be displayed from left to right by default. If you set the viewport, for example, just set user-scalable=no, for example <meta name=viewport content=user-scalable=no />, then the width under iOS will still be displayed at 980 (that is, it will be scaled by dpi by default), but it will no longer be scaled under Android and winphone, and the browser resolution and the real settings resolution are the same.
2) For iOS devices, setting width can take effect, but for Android, setting width will not take effect. ios devices, the scaling ratio, dpi, is automatically calculated through the width you set and the real resolution. However, in Android, you set width is invalid. What you can set is a special field target-densitydpi. For target-densitydpi, you can refer to this article: http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. In other words, there are three variables: browser width, device real width, and dpi. Let's simply use a formula to express the relationship between them (not real relationships, just use it for a brief explanation) Device real width * dpi = browser width, here the three variables, the device real width is a known value that we cannot operate, and we can set one of the other variables to affect the other. In ios, what we can change is the browser width, dpi is automatically generated, and in android, what we can change is dpi, and the browser width is automatically generated. For Android, no matter how we set width, it will not have an impact on the browser width.
ps: Here I will talk about another strange problem: in htc's g11 (I only have this one for htc's phone, and no other tests), if dpi is set without displaying width, user-scalable=no does not take effect, that is,: <meta name=viewport content=target-densitydpi=300,user-scalable=no />, it cannot prevent users from zooming in the screen. We need to set the width value displayably. Although this value does not have any impact on the browser screen resolution under Android (it will still have an impact on iOS), we still need to set it, and this value must be greater than 320. If it is less than or equal to 320, user-scalable=no cannot be effective. This problem only appears on htc's g11 phone, and there is no such problem on aquos phone. Compatible with Android is really a headache @_@. I don’t know how many pitfalls will be in the future. On winphone, the result is even more strange: I set a value greater than 480 for the width of the viewport, and user-scalable=no will fail. If a value less than 480, user-scalable=no will take effect. But no matter how much value I set the viewport width, it does not have the effect on the real width displayed by winphone, nor does it have the effect through target-densitydpi. Set width, if it is less than 480, the screen will zoom out, but the scale of reduction is completely different from what I expected. I don't know what the rule it is zoomed in. I don't know if this is a problem with winphone or a problem with dell implementation.
3) This article should be directly related to the previous article: when the iOS device is horizontal and vertical, it will automatically adjust the dpi. Whether it is horizontal or vertical, it can ensure that the browser width is equal to the value set in the viewport. Therefore, when the horizontal and vertical screens are horizontal and vertical screens, the size of the content displayed on the page will automatically scale and change. When Android phones are horizontal and vertical screens, the dpi will not be changed, and when horizontal and vertical screens, the web page will not be zoomed. For this reason, iOS can ensure that no scroll bar is generated on the horizontal and vertical pages, and the full screen is displayed, but Android cannot guarantee this. If the horizontal and vertical screens are not allowed to be full, and vice versa.
4) For iOS devices, if the width display is defined and the widest position of the page exceeds width, width is invalid and will still be displayed at the widest width (there will be no scroll bar). But a very strange problem will occur at this time. After you switch the horizontal and vertical screen of your phone several times, you will find that your page has automatically enlarged and a scroll bar appears, but in fact, the enlarged width has nothing to do with the width you set. To prevent this from happening, you need to set the width of the width to be larger than the widest part of the page, or the same.