Viewport, openglviewport

Viewport, openglviewport

1. Concepts of viewport

In layman's terms, the viewport on a mobile device is the area on the device's screen that can be used to display our webpage. Another specific point is the browser (or webview in an app) the area used to display the webpage, but the viewport is not limited to the size of the visible area of the browser. It may be larger than the visible area of the browser, or smaller than the visible area of the browser. By default, the viewport on a mobile device is larger than the visible area of the browser. This is because the resolution of a mobile device is relatively small than that of a desktop computer, so in order to display those traditional Websites designed for desktop browsers on mobile devices, browsers on mobile devices set their default viewport to 980px or 1024px (or other values, which are determined by the device ), however, the consequence is that the browser will display a horizontal scroll bar, because the width of the visible area of the browser is smaller than the width of the default viewport. (When creating a new webpage to write a webpage with a width of 100%, we can use Chorme to test that the webpage with viewport added has no horizontal scroll bar, but does not add a horizontal scroll bar in viewport ing, this indicates that the viewport size of the mobile terminal is not equal to the screen size) lists the default viewport width of browsers on some devices.

2. 1px in css is not equal to 1px of the device

In css, we generally use px as the unit. In a desktop browser, one pixel of css usually corresponds to one physical pixel on the computer screen, which may lead to our illusion, that is, pixels in css are physical pixels of devices. However, this is not the case. pixels in css are only an abstract unit. In different devices or environments, 1px in css represents different physical pixels of devices. In web pages designed for desktop browsers, we don't need to worry about this, but we must understand this on mobile devices. In earlier mobile devices, the screen pixel density was relatively low. For example, iPhone 3 has a resolution of 320x480. on iPhone 3, a css pixel is indeed equal to a screen physical pixel. Later, with the development of technology, the pixel density of mobile devices is getting higher and higher. From iPhone 4, Apple launched the so-called Retina screen, which doubled the resolution and changed to 640x960, the screen size remains unchanged, which means that the pixels on the screen of the same size are doubled. At this time, a css pixel is equal to two physical pixels. This is also true for mobile devices of other brands. For example, Android devices can be divided into ldpi, mdpi, hdpi, xhdpi, and other levels based on the screen pixel density. The resolution is also varied. The number of physical screen pixels that a css pixel on Android devices is equivalent, there is no final conclusion because devices are different.

Another factor is the change of px in css, that is, user scaling. For example, if a user doubles the page size, the physical pixels represented by 1px in css will also double; otherwise, the page will be doubled, the physical pixels represented by 1px in css are also doubled. This will be discussed later in this article.

In mobile browsers and some desktop browsers, the window object has a devicePixelRatio attribute, which is officially defined as the ratio of physical pixels of devices to independent pixels of devices, that is, devicePixelRatio = physical pixel/independent pixel. Px in css can be regarded as the independent pixel of the device. Therefore, through devicePixelRatio, we can know how many physical pixels a css pixel on the device represents. For example, on the iphone of the Retina screen, the value of devicePixelRatio is 2, that is, one css pixel is equivalent to two physical pixels. However, devicePixelRatio has some compatibility issues in different browsers. Therefore, we cannot fully trust this feature yet. For details, refer to this article.

Test results of devicePixelRatio:

3. PPK's Theory of Three viewports

Ppk has a lot of research on viewport on mobile devices (article 1, article 2, and article 3). If you are interested, you can take a look, there are a lot of data and opinions in this article. Ppk believes that there are three viewports on the mobile device.

First, browsers on mobile devices think that they must make all websites display normally, even those websites that are not designed for mobile devices. However, if you use the visible area of the browser as the viewport, because the screen of mobile devices is not very wide, when the Websites designed for the desktop browser are displayed on mobile devices, it is inevitable that the viewport of a mobile device is too narrow, and the layout will be messy. Someone may ask, isn't there a lot of cell phones with very high resolutions, such as 768x1024 or x, is it okay to use such a mobile phone to display a website designed for a desktop browser? As we have already said, 1px in css does not represent 1px on the screen. The larger the Resolution, the more physical pixels that 1px represents in css, and the larger the value of devicePixelRatio, this is easy to understand, because you have increased the resolution, but the screen size is not much larger. You must make 1px in css more physical pixels, in order to make the size of 1 px items on the screen similar to those of low-resolution devices, otherwise it will be too small to see clearly. Therefore, on devices like 1080x1920, by default, you may only need to set the width of a div to more than 300 px (depending on the value of devicePixelRatio ), is the width of the full screen. Back to the topic, if you set the visible area of the browser on a mobile device to viewport, some websites will be confused because the viewport is too narrow, therefore, these browsers decide to set the viewport to a wide value by default, such as 980px, so that even those websites designed for the desktop can be normally displayed on mobile browsers. Ppk calls the default viewport of the browserLayout viewport.The width of this layout viewportcan be obtained through document.doc umentElement. clientWidth.

However,Layout viewportThe width of the viewport is greater than the width of the visible area of the browser. Therefore, we need a viewport to indicate the size of the visible area of the browser. ppk calls this viewportVisual viewport. The width of visual viewport can be obtained through window. innerWidth, but it cannot be obtained correctly in Android 2, Oprea mini and UC 8.

Now we have two viewports:Layout viewportAndVisual viewport. But the browser does not think it is enough, because more and more websites are designed separately for mobile devices, so there must be a viewport that perfectly adapts to mobile devices. The so-called perfect adaptation means that, first, you do not need to zoom in and out the scroll bar to view all the content of the website. Second, the size of the displayed text is appropriate, for example, a 14 PX text cannot be viewed because it is displayed too small on a high-density pixel screen. The ideal situation is that the 14 PX text, regardless of the density of the screen, at what resolution, the displayed size is almost the same. Of course, it's not just text, but other elements like images. Ppk calls this viewportIdeal viewportThat is, the third viewport is the ideal viewport of the mobile device.

Ideal viewport does not have a fixed size. Different devices have different ideal viewports. The ideal viewport width of all iPhones is 320px, regardless of whether the screen width is 320 or 640. That is to say, in the iphone, The 320px in css represents the iphone screen width.

But Android devices are more complex, 320px, 360px, 384px, etc. About the different device ideal viewport width is how much, you can go to the http://viewportsizes.com to view, it collects the ideal width of many devices.

Summary: ppk divides viewport on mobile devicesLayout viewport,Visual viewportAndIdeal viewportAmong them, ideal viewport is the most suitable viewport for mobile devices. The width of ideal viewport is equal to the screen width of mobile devices, as long as the width of an element in css is set to the width of ideal viewport (unit: px), the width of this element is the width of the device screen, that is, the effect of 100% in width. The significance of ideal viewport is that, no matter what resolution screen, Websites designed for ideal viewport do not require manual scaling or horizontal scroll bars, can be perfectly presented to users.

 

4. Use meta tags to control viewport

The default viewport of a mobile device is layout viewport, which is a viewport wider than the screen. However, when developing a mobile device website, we need ideal viewport. How can we get the ideal viewport? This is the turn of the meta tag.

When developing a mobile device website, the most common action is to copy the following to our head Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

The meta tag is used to make the current viewport width equal to the width of the device, and manual scaling is not allowed. Users may not be allowed to zoom in or out different websites, but the viewport width must be equal to the width of the device. This should be the effect everyone wants, if you do not set this way, the default viewport wider than the screen will be used, that is, the horizontal scroll bar will appear.

What are the functions of this meta tag named viewport?

The meta viewport label was first introduced by Apple in its safari browser to solve the viewport problem of mobile devices. Later, Android and various browser vendors followed suit and introduced support for meta viewport, which proved to be very useful.

In Apple's specifications, meta viewport has six attributes (for the moment, those in content are called attributes and values), as follows:

Width	SetLayout viewportIs a positive integer or string "width-device"
Initial-scale	Set the initial scaling value of the page to a number with decimals.
Minimum-scale	The minimum scaling value of a user, which is a number with decimal digits.
Maximum-scale	The maximum scaling value of a user, which is a number with decimal digits.
Height	SetLayout viewportThis attribute is not important to us and is rarely used.
User-scalable	Whether to allow scaling. The value is "no" or "yes". "no" indicates no, and "yes" indicates allow.

These attributes can be used at the same time, or separately or in combination. Separate multiple attributes with commas.

In addition, Android also supports the private attribute target-densitydpi, which indicates the density level of the target device and determines the number of physical pixels represented by 1px in css.

Target-densitydpi

The value can be a value or one of the high-dpi, medium-dpi, low-dpi, and device-dpi strings.

In particular, when target-densitydpi = device-dpi, 1px in css is equal to 1px in physical pixels.

This attribute is only supported by Android, and Android has decided to discard the target-densitydpi attribute, so we should avoid using this attribute.

 

5. Set the current viewport width to the ideal viewport width.

To obtain the ideal viewport, you must set the default layout viewport width to the screen width of the mobile device. Because the width in meta viewport can control the width of layout viewport, we only need to set the width to the special value of width-device.

<meta name="viewport" content="width=device-width">

Is the test result of this Code on various mobile browsers:

We can see that all browsers can change the current viewport width to the ideal viewport width through width = device-width, but note that on the iphone and ipad, whether the screen is portrait or landscape, the width is the ideal viewport width when the screen is portrait.

It seems that no one has ever eaten pork. No one has ever seen a pig running ~, Indeed, no matter what viewport you don't understand when developing a webpage on a mobile device, you may only need such a code.

But you certainly do not know

<meta name="viewport" content="initial-scale=1">

This code can achieve the same effect as the previous code. You can also change the current viewport to ideal viewport.

Haha, it's dumb, Because theoretically, the function of this Code is not to scale the current page, that is, the size of the page. So why is the effect of width = device-width?

To understand this, you must first understand what the scaling is relative to, because the scaling value here is 1, that is, there is no scaling, but it achieves the ideal viewport effect. Therefore, there is only one answer. The scaling is relative to the ideal viewport. When the ideal viewport is scaled 100%, that is, when the scaling value is 1, will the ideal viewport be obtained? Facts prove that this is indeed the case. Is whether the current viewport width can be changed to the ideal viewport width after <meta name = "viewport" content = "initial-scale = 1"> is set for browsers on various mobile terminals? result.

Test results show that initial-scale = 1 can also change the current viewport width to the ideal viewport width, however, for IE on windows phone, whether it is a portrait screen or a landscape screen, the width of ideal viewport is set to the width of the portrait screen. But this little flaw is irrelevant.

But what if the width and initial-scale = 1 appear at the same time and there is a conflict? For example:

<meta name="viewport" content="width=400, initial-scale=1">

Width = 400 indicates that the current viewport width is set to 400px, and initial-scale = 1 indicates that the current viewport width is set to ideal viewport width, which command should the browser obey? Is it the one that follows the writing order? No. In this case, the browser will take the larger values of the two. For example, if width = 400 and ideal viewport is 320 in width, the value is 400. If width = 400 and ideal viewport is 480 in width, the width of ideal viewport is used. (Ps: In the uc9 browser, when initial-scale = 1, regardless of the width attribute value, the width of the viewport is always the width of the ideal viewport)

Finally, we need to set the current viewport width to the width of ideal viewport. You can set either width = device-width or initial-scale = 1, however, each of the two has a small defect, that is, the iphone, ipad, and IE will be in portrait mode, regardless of whether the screen is horizontal or vertical. The ideal viewport width of the portrait screen prevails. Therefore, the most perfect way to write is to write both of them, so that initial-scale = 1 solves problems with the iphone and ipad, width = device-width solves the IE problem:

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

 

6. More about meta viewport

1. default values for scaling and initial-scale

First, let's discuss the scaling problem. As mentioned above, scaling is relative to ideal viewport. The larger the scaling value, the smaller the current viewport width, and vice versa. For example, in iphone, the width of ideal viewport is 320px. If initial-scale is set to 2, the width of viewport will change to only 160px, if it is doubled, the original 1px is changed to 2px, but 1px is not changed to 2px, but the actual width remains unchanged, the length of 1px is the same as that of 2px. Therefore, to enlarge the size by 2 times, PX is required to fill up the width. Now, only PX is required. Therefore, we can get a formula:

Visual viewport width = ideal viewport width/current zoom value = ideal viewport width/visual viewport width

Ps: the width of visual viewport refers to the width of the visible area of the browser.

Most browsers comply with this theory, but there are some problems with native browsers and IE on Android. The webkit browser provided by Android is normal only when initial-scale = 1 and the width attribute is not set, which is equivalent to this theory in it; IE does not discard the initial-scale attribute at all. No matter what you set for it, initial-scale always shows 1 effect.

Now let's talk about the default value of initial-scale. What is the default value of initial-scale when this attribute is not written? Obviously it won't be 1, because when initial-scale = 1, the current layout viewport width will be set to the ideal viewport width, but as mentioned above, the default layout viewport width of each browser is generally 980, 1024, 800, and so on. It is the ideal viewport width at the beginning, therefore, the default value of initial-scale is certainly not 1. The default value of initial-scale on Android devices does not seem to be available, or it simply does not have a default value. You must write the display to make it work. We don't care about it, here we will focus on the default initial-scale value on the iphone and ipad.

According to the test, we can draw a conclusion on the iphone and ipad, that is, no matter what width you set for layout viewpor, but do not specify the initial scaling value, the iphone and ipad will automatically calculate the initial-scale value to ensure that the current layout viewport width is the width of the visible area of the browser after scaling, that is, there will be no horizontal scroll bar. For example, on the iphone, we do not set any viewport meta tag. In this case, the width of layout viewport is 980px, but we can see that there is no horizontal scroll bar in the browser, by default, the browser reduces the page size. According to the formula above, the current zoom value is ideal viewport width/visual viewport width, and we can get:

Current scaling value = 320/980

That is, the default value of initial-scale should be 0.33. After you specify the initial-scale value, this default value does not work.

Remember this conclusion:On the iphone and ipad, no matter how wide the viewport you set, if the default zoom value is not specified, the iphone and ipad automatically calculate the zoom value, in this way, the current page does not show a horizontal scroll bar (or the width of the viewport is the width of the screen.

2. dynamically change the meta viewport tag

Method 1

You can use document. write to dynamically output the meta viewport tag, for example:

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

Method 2

Use setAttribute to change

<meta id="testViewport" name="viewport" content="width = 380"><script>var mvp = document.getElementById('testViewport');mvp.setAttribute('content','width=480');</script>

 

 

A bug in Android 2.3 Browser

<Meta name = "viewport" content = "width = device-width"> <script type = "text/javascript"> alert(document.doc umentElement. clientWidth); // The 600, normally, 320 </script> <meta name = "viewport" content = "width = 600"> <script type = "text/javascript"> alert(document.doc umentElement. clientWidth); // The value 320 is displayed. Normally, the value 600 is displayed. </script>

The tested mobile phone ideal viewport is 600 Px in width. The value displayed for the first time is 320, but this value should be the result of the meta tag of the first line. The value displayed for the second time is, this is the effect of the first line of meta tag, so in Android 2.3 (maybe all 2. if you overwrite or modify the meta viewport label in the browser that comes with Version x, the results will be confusing.

 

VII. Conclusion

After talking so much nonsense, it is necessary to summarize some useful information.

First, if the meta viewport label is not set, the default width of the browser on the mobile device is 800px, 980px, 1024px, and so on, which is greater than the screen width. The Unit px used here is the px in css, which is not the same as the px representing the actual physical pixels on the screen.

2. Each mobile device browser has an ideal width. The ideal width refers to the width in css, which has nothing to do with the physical width of the device. In css, this width is equivalent to the width represented by 100%. We can use the meta tag to set the viewport width to the Desired width. If you do not know the ideal width of the device, use the special value "device-width, initial-scale = 1 also sets the viewport width to the ideal width. Therefore, we can use

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

To get an ideal viewport (that is, the ideal viewport mentioned above ).

Why do we need an ideal viewport? For example, the ideal viewport width of a mobile phone with a resolution of 320x133 is 320px, while the ideal viewport width of a mobile phone with the same screen size but a resolution of 640x960 is also 320px, why is the ideal width of the mobile phone with a large resolution the same as that of the mobile phone with a small resolution? This is because only in this way can we ensure that the same website looks the same or similar On devices with different resolutions. In fact, although there are so many mobile phones with different brands and different resolutions on the market, their ideal viewport widths are simply 320, 360, 384, and 400, all of them are very close, and the close of the ideal width means that the website we make for a device's ideal viewport will not be very different or even the same performance on other devices.