HTML meta viewport attribute description

What is Viewport?

The mobile browser places the page in a virtual "window". Generally, this virtual "window" is wider than the screen, in this way, you do not need to squeeze each webpage into a small window (this will damage the layout of the webpage that is not optimized for the mobile browser). You can view different parts of the webpage through translation and scaling. The mobile Safari browser recently introduced the meta tag viewport, which allows web developers to control the size and scaling of viewport. Other mobile browsers also support the meta tag.

Viewport Basics

The viewport meta tag of a commonly used page optimized for a mobile webpage is roughly as follows:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">

Width: controls the viewport size. You can specify a value. If it is 600 or a special value, for example, if device-width is the width of a device, the unit is the CSS pixel when the unit is 100% ).
Height: corresponds to width and specifies the height.
Initial-scale: the initial scale, that is, the scale when the page is loaded for the first time.
Maximum-scale: the maximum scale that users can scale.
Minimum-scale: minimum scale that allows users to scale.
User-scalable: whether the user can manually Scale

Questions about viewport

Viewport is not only unique in ios, but also has viewport on android and winphone. They solve the same problem, that is, directly resetting the resolution between the physical size and the browser through dpi, regardless of the actual resolution of the device. This resolution is irrelevant to the resolution of the device. For example, if you get an iPhone 3 gs of 3.5-320*480, an iPhone 4 of 3.5-640*960, or an ipad2 of 9.7-1024*768, the device resolution is different, the physical size is also different, but you can set viewport to make them have the same resolution in the browser. For example, if your website is 800 px wide, you can set the viewport width to so that your website can be fully displayed on these three devices.

With the above knowledge, I believe that everyone who has a better understanding of viewport should have understood it. This is not the focus of my speech today. I want to explain some differences between viewport and android.

The following information is used to search for viewport on the Internet:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no "/>

This Code indicates that the width of the viewport is equal to the actual resolution of the physical device, and user scaling is not allowed. All mainstream web apps are configured in this way. In fact, they intentionally discard the viewport and do not scale the page. In this way, dpi must be the same as the actual resolution on the device without any scaling, therefore, the webpage is more delicate. Those who are playing with ps should know what it looks like when you scale a 1000*1000 image to 500*500, right? Image Distortion cannot be avoided.

 

However, the opposite is true for an application. You need to use viewport and zoom. No matter what the actual resolution is, no matter what the physical size is, I want to have a unified resolution rate in the browser, and do not allow users to zoom. I used devices for testing: iPhone 4, ipad2, htc g11, and aquos phone of some vendors (android system) I encountered the following problems along the way:

 

1) if viewport is set without display, the default width is 980. If the width of all elements on the page is less than 980, the width is 980. If the width of the page exceeds 980, the width is equal to the maximum width. By default, the entire page is displayed from left to right. If viewport is set, for example, only user-scalable = no is set, for example, <meta name = "viewport" content = "user-scalable = no"/>, in ios, the width is still displayed by 980 (dpi is scaled by default), but android and winphone are not scaled any more. The browser resolution is consistent with the actual setting resolution.

 

2) for ios devices, setting width takes effect, but for android devices, setting width does not. For ios devices, the ratio of scaling is calculated automatically by setting the width you set and setting the actual resolution. In android, the width you set is invalid, you can set a special field target-densitydpi, for target-densitydpi can refer to this article: http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html. That is to say, there are three variables: browser width, device real width, dpi. Let's simply use a formula to express the relationship between them (not the real relationship, which is used for simple description). The actual width of the device * dpi = browser width. The three variables here are, the actual width of the device is a known value that we cannot operate. The other two variables can be set to affect the other. In ios, we can change the width of the browser, which is automatically generated by dpi, in android, we can change the dpi, and the browser width is automatically generated. For android, no matter how we set width, it does not affect the browser width.

Ps: Here I want to talk about another strange problem: in htc's g11 (I only have this one for htc's mobile phone, but nothing else is tested ), if width is set without display, user-scalable = no does not take effect, that is, <meta name = "viewport" content = "target-densitydpi = 300, user-scalable = no "/>. We need to set the width value explicitly. Although this value does not affect the resolution of the screen in the android browser (it will affect ios), we still need to set it, the value must be greater than 320. If the value is less than or equal to 320, user-scalable = no cannot take effect. This problem only occurs on htc's g11 mobile phone and does not occur on aquos phone. Compatibility with android is really a headache @ _ @. I don't know how many pitfalls there will be in the future. In winphone, the result is even more strange: I set a value greater than 480 for the width of the viewport, and the user-scalable = no is invalid, and set a value smaller than 480, user-scalable = no. However, no matter how many values I set for viewport width, the actual width displayed by winphone does not have the expected impact, and the target-densitydpi does not. Set the width. If it is less than 480, the screen will be scaled, but the scaled down ratio is completely different from what I expected. I don't know how it scales. I don't know whether this is a winphone problem or a dell implementation problem.

 

3) This item should be directly related to the previous one: When the ios device is in the portrait mode, the dpi will be automatically adjusted, regardless of the landscape or Landscape mode, make sure that the width of the browser is equal to the value set in the viewport. Therefore, when the screen is landscape, the size of the content displayed on the page is automatically scaled and changed. The dpi will not be changed when the android mobile phone is in the portrait mode, and the webpage will not be scaled during the portrait mode. Therefore, ios can ensure that the horizontal and vertical screen pages do not produce scroll bars, full screen display, but android cannot ensure this, horizontal full screen cannot be full screen, and vice versa.

 

4) for ios devices, if the width display is defined and the width of the page exceeds the width, the width is invalid and is still displayed based on the width (no scroll bar is available ). However, a very strange problem may occur at this time. After you switch the phone screen several times, you will find that your page is automatically enlarged and a scroll bar appears, in fact, the enlarged width is not related to the width you set. To prevent this, you must set the width to be greater or the same as the width of the page.