Usage of Meta ViewPort properties in HTML

Usage of Meta ViewPort attributes in HTML? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!

What is ViewPort
mobile browser is to put the page in a virtual “window”, usually this virtual “window” is wide than the screen, so it is not to put each A web page is squeezed into a small window (this will destroy the layout of the web page optimized for the mobile browser), and the user can see the different parts of the web page by panning and zooming. The mobile version of the Safari browser has introduced the ViewPort this Meta TAG, allowing web developers to control the size and zoom of ViewPort, and other mobile browsers are also funded.
ViewPort Basis
A viewport meta label for a commonly used page optimized page is approximately as follows:

    
Width: Controls the size of ViewPort, which can be specified, if 600, or special value, such as Device-Width is the width of the device (pixels of CSS when zooming at 100%).

HEIGHT: Corresponds to Width, specifying the height.
Initial-Scale: The initial scale, that is, the scaled scale when the page is first loaded.
Maximum-Scale: Allows users to scale up the maximum ratio.
Minimum-Scale: Allows users to scale the minimum proportion.
User-scalable: Does the user can scale
About some issues of ViewPort
Viewport is not only the unique attribute on iOS, in Android, Winphone also has ViewPort. The issues they have to solve are the same,That is, the true resolution of the device is ignored, and the resolution is reset directly between physical dimensions and browsers. This resolution is independent of the resolution of the device. For example, you take a 3.5-inch-320 * 480 iPhone3 GS, 3.5 inch -640 * 960 IPHONE4 or 9.7-inch -1024 * 768 IPAD2, although the resolution of the device is different, the physical size is different, but you can set it ViewPort allows them to have the same resolution in the browser. For example, your website is 800px wide, you can display your website all over these three different devices by setting upport’s width = 800.
The above knowledge, I believe that each classmate who knows a slightly better understanding of ViewPort should have already understood. This is not the focus I want to say today. I want to explain some differences in viewport on iOS and Android.
Online search on ViewPort, basically all the following information:

   The code means that the width of the ViewPort is equal to the true resolution on the physical device, and the user is not allowed to scale. All the mainstream web app is set up, its role is actually deliberately discarding the viewport, not zooming in the page, so the DPI is sure and the real resolution on the device, does not make any zoom, the web page will therefore appear higher exquisite. Students who play PS should know what to zoom in directly to 500 * 500 points directly to 500 * 500 points, right? The distortion of the picture must not escape.  But an application I have to do is reversed, and you need to use ViewPort to use zoom. Regardless of the real resolution, no matter how much physical size is, I hope to have a unified resolution in the browser, and users do not allow users to zoom. The equipment I use to test is: iPhone4, ipad2, htc G11, I don't know what manufacturer's Aquos Phone (Android system), ASUS's Android Pad, Dell's WInphone then I have encountered the following questions: 
1) If you do not display ViewPort, Width is default 980. If all the elements width of the page are less than 980, the width is 980, if the wider position is more than 980, then Width is equal to the maximum width. In summary, the default can display the entire page from left to right. If ViewPort is set, for example, User-Scalable = NO is only simply set, for example , then the width is displayed under 980 (ie, the default will be scaled by DPI), but Android and Winphone will not be Scaled, browser resolution and real setting resolution consistent.


2) For iOS devices, set width can take effect, but for Android, setting Width does not take effect. IOS device, the scaled ratio, the DPI is automatically calculated by the width you set, and you set the width in Android, you can set a special field target-densitydpi, about target-densitydpi can be referred to This article: http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. That is, there are three variables: browser width, device real Width, DPI. We simply use a formula to express the relationship between them (not real relationship, simply instructions) Equipment real width * dpi = browser Width, three variables here, the device is really Width is a known value we cannot operate In addition, two variables we can set one to affect the other. In iOS, we can change the browser width, DPI automatically generated, and in Android, we can change the DPI, browser Width automatically generates. For Android, no matter how we set width, it will not have an impact on the browser WIDTH.
PS: Here I also say a strange question.Question: In HTC’s G11 (HTC mobile phone I only have this one, others don’t measure), if you set the DPI without displaying width, user-scalable = no does not take effect, ie, , Unable to prevent the user from zooming on the screen. We need to display the width value, only this value does not have any impact on the browser displays under Android (IOS still affects), we still have to set it, and this value must be greater than 320, If less than or equal to 320, the user-scalable = No cannot take effect. This problem only appears on the HTC’s G11 phone, there is no problem in Aquos Phone. Compatible with Android is a headache thing @ _ @, don’t know how many pits do you know in the future. In WinPhone, the result is even more strange: I set a value greater than 480 for the Width of ViewPort, and the user-scalable = NO has been invalid, and the value of less than 480 is set, and user-scalable = NO can take effect. But no matter how much value I gave ViewPort, the Width that is really displayed for Winphone does not produce my expectation, and there is no impact through Target-DensityDPI. Set width, if less than 480, the screen will be zoomed, but the proportion of the reduction is completely different from I expected, I don’t know what law is scaled. I don’t know if this is a problem with Winphone, or the problem of Dell implementation.

3) This and the previous one should be directly related: iOS devices are automatically adjusted in the horizontal vertical screen, and the browser width is equal to the value set in Viewport regardless of the horizontal screen or vertical screen. , The size of the content displayed in the page is automatically zoomed to change when the horizontal vertical screen is as possible. When the Android phone is in the horizontal vertical screen, the DPI will not change the DPI. When the horizontal vertical screen, the webpage does not generate zoom. Therefore, IOS can guarantee that the horizontal and vertical screen page does not generate the scroll bar, full screen display, but Android can’t guarantee this, and the full screen is full of full screen, and vice versa.

4)IOS device, if the width display is defined, and the wider position of the page exceeds Width, Width is invalid, still displayed by the widest width (there will be no scroll bar). But there will be a very strange question at this time. After you switch your mobile phone horizontal vertical screen, you will find that your page is automatically enlarged, there is a scroll bar, but in fact, the width of the enlargement is actually the Width you set up. There is no relationship. In order to prevent this, you need to set the width of Width than the widest place, or the same.


Thank you for reading! After reading the above, do you know about the usage of Meta ViewPort attributes in HTML? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment