This article is mainly translated from the viewport of the mobile browser, and some content is supplemented and modified.
For mobile web development, it is best to understand the concept of viewport. There are two articles in quirksmode.org.ArticleI introduced it in detail, A Tale of Two viewport (1 2). I felt very good. I wanted to translate it, but these two articles were too long and impatient, therefore, we extracted the viewport part and wrote it in semi-translated and semi-written mode, so that we can better understand it.
The concepts of CSS pixels and device pixels are also not mentioned in Js for obtaining various width and height and positions. If you want to know more clearly, we recommend that you read the two articles. Take the film from quirksmode.org.
Desktop browser
First, let's talk about the concept of viewport on a desktop browser. In a desktop browser, viewport is the visible range of the browser content. It determines the default width and height of <HTML> elements. For example:
On a page with a flow layout, you have set width: 30% on the sidebar and placed it under <body>. Normally, you can drag the browser to change the browser size, this sidebar automatically adjusts the width to 30% of the browser width. What is the automatic adjustment process?
This sidebar gets the width of the parent element, multiplied by 30% to get its own width. The problem becomes the value of the <body> width of the parent element in the sidebar. Generally, the width of a block-level element is automatically extended to the width of the parent element, so the width of <body> is equal to the width of <HTML>. Who determines the width of <HTML>? Theoretically, if <HTML> is not specified, the width of the CSS is determined by the viewport. Therefore, the 30% width is the browser's viewport width.
The width and height of the viewport will change not only when the window is resize, but also when the window is scaled. For example:
<HTML> <pead> <style> body {margin: 0 ;}# nav {background-color: #999; width: 100%; Height: 100px ;}# test {width: 800px; Background-color: # Eee; Height: 100px ;} </style> </pead> <body> <Div id = "nav"> </div> <Div id = "test"> </div> </body> </ptml>
RunCode
On this page, there is a nav with a width of 100% and a test element with a width of PX. Adjust the window width to 800px, and the size of the two elements nav and test on the page is consistent. Zoom in and zoom in the page by using the browser. In this case, the CSS width of the viewport is reduced to 400px (the device width remains unchanged), the CSS width of the nav element is reduced to 400px, and the test element is still 800px, it is twice as big as nav.
Viewport is not part of HTML and cannot be controlled by CSS. For a desktop browser, viewport is just something that has the visual width and height (CSS pixels) attribute of the browser.
Mobile browsers
Mobile devices have much smaller screens than desktop devices. What will happen if you copy the desktop browser viewport concept?
Suppose that the width of a mobile website is 30% * 320 for the sidebar. If the width and height of a mobile browser are 480 *, the actual width of the sidebar is less than PX, A few words are not enough, which will make your website look bad. A large vote will make webpages with good desktop browser structure miserable on mobile browsers.
The mobile browser designer hopes that the web page display on the mobile device can be as close as possible to the desktop browser, so there are two concepts: Visual viewport and layout viewport.
Visual viewportIs the part of the page currently displayed by the browser. You can drag and drop the area to change the visual viewport size.
Layout viewportThe viewport provided for CSS computing is equivalent to the viewport of the desktop browser. The difference is that layout viewport has no relationship with the visible range of the current browser, and how the browser scales is irrelevant to it, it is a given value.
Different devices have different default values for layout viewport. The width is generally safari 980px, opera 850px, Android WebKit 800px, and IE 974px. The height is calculated based on the aspect ratio of the device screen. (In fact, the height of the viewport is almost useless and can be ignored)
In this way, the width and height of the viewport provided for CSS computing are similar to those of the desktop browser, and the rendering Effect of page computing is almost the same as that of the desktop browser. Page zoom-in does not affect layout viewport, that is, does not affect page rendering.
In a mobile browser, when all pages are opened, visual viewport = layout viewport by default, that is, the minimum scaling. For example, you can use mobile safari to open a page regardless of the page content, the 980px width is displayed.
Modify layout viewport
YesConnectWrite the <meta> label on
<Meta name = "viewport" content = "width = device-width, user-scalable = No">
<Meta name = "viewport" content = "Initial-scale = 1.0, user-scalable = No">
Viewport Syntax:
<MetaName= "Viewport"Content= "Height = [pixel_value | device-height], width = [pixel_value | device-width], initial-scale = float_value, minimum-scale = float_value, maximum-scale = float_value, user-scalable = [Yes | no], target-densitydpi = [dpi_value | device-DPI | high-DPI | medium-DPI | low-DPI]"/>
Height
Corresponds to width and specifies the height.
Width
Controls the viewport size. You can specify a value or a special value. For example, if device-width is the width of the device, the unit is the pixel of CSS when the unit is scaled to 100% ).
Initial-Scale
Initial scaling. That is, the initial Page scaling degree. This is a floating point value and a multiplier of the page size. For example, if you set the initial scale to 1.0, the web page will be displayed at of the target density resolution. If you set it to "2.0", the page will be enlarged to 2 times.
Maximum-Scale
Maximum scaling. That is, the maximum scale allowed. This is also a floating point value that specifies the maximum multiplier between the page size and the screen size. For example, if you set this value to "2.0", the page can be up to two times larger than the target size.
User-scalable
You can adjust the scaling. That is, whether the user can change the page zoom degree. If it is set to yes, the user is allowed to change it, and vice versa. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored because scaling is impossible at all.
All zooming values must be within the range of 0.01-10.
Target-densitydpi
The pixel density of a screen is determined by the screen resolution. It is usually defined as the number of dots per inch (DPI ). Android supports three types of screen pixel density: Low pixel density, medium pixel density, and high pixel density. A screen with a low pixel density has fewer pixels per inch, while a screen with a high pixel density has more pixels per inch. By default, the android browser and webview screens are of medium pixel density.
The following is the value range of the target-densitydpi attribute.
To prevent the android browser and webview from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-DPI. When you do this, the page will not be scaled. On the contrary, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the width of the viewport to match the width of the device so that your page can adapt to the screen.
For example:
<! -- (Set the screen width to the device width, and disable manual scaling) --> < Meta Name = "Viewport" Content = "Width = device-width, user-scalable = No" /> <! -- (Set the screen density to high-frequency, medium-frequency, and low-frequency auto scaling. manual scaling is prohibited) --> < Meta Name = "Viewport" Content = "Width = device-width, target-densitydpi = high-DPI, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = No" />High-resolution mobile devices
The resolution of a mobile browser is not necessarily the same as that of a mobile device. There are many high-resolution mobile phones on the market, such as 3.7-inch Nexus One phones with a resolution of 800*480, and 3.5-inch iPhone 4 with a resolution of 960*640. However, if the actual value is provided to the browser for computation and rendering, there will be two problems.
Therefore, these high-resolution devices do not provide real pixel values to browsers, but scale proportionally. For example, iPhone 4 is reduced by 2 times (480*320), and nexus is reduced by 1.5 times (533*320). In other words, each page is enlarged by X by default. In the past, a webpage designed for iPhone 3gs or lower showed the same performance on iPhone 4, but it was more refined.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
