The layout of the mobile side is different from the PC side, first we need to know that in the mobile side, the 1px in the CSS is not equal to the physical 1px, because the screen resolution of the mobile phone is getting higher and higher, but the screen size has not changed too much, which means that a physical pixel is actually plugged into several pixels.
In the mobile browser and in some desktop browsers, the Window object has a Devicepixelratio property, which is officially defined as the ratio of the physical pixels of the device to the device's independent pixels, i.e. Devicepixelratio = physical pixels/independent pixels. The PX in the CSS can be seen as a separate pixel for the device, so by devicepixelratio we can see how many physical pixels the previous CSS pixel represents on the device. For example, on the iphone of the retina screen, the value of Devicepixelratio is 2, which means that 1 css pixels are equivalent to 2 physical pixels. However, it is important to note that there are some compatibility issues with Devicepixelratio in different browsers, so we still can't trust this thing completely.
There is also a factor that will cause the change of PX in CSS, that is, user zoom. For example, when the user enlarges the page by one time, the physical pixels represented by 1px in the CSS will also increase by one time, whereas the physical pixels represented by 1px in the CSS will be reduced by a factor of one time.
So in the mobile development, in order to make the mobile side of the page on different phones on the same size to display, we can set the width of the page, and then get the width of the device, we can get the width of the previous set and the ratio of the device width, and then use HTML5 new viewport to zoom the page, And fixed does not allow the user to re-scale again.
Before we look at the specific usage of viewport, let's get a few ideas straight.
Layout viewport:
Visual viewport
If you don't know what to look at, you'll find out:
Viewport specific uses are:
When using the META tag, write properties in the content, separated by commas
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
| Property name | Notes |
|---|---|
| Width | Sets the width of the layout viewport as a positive integer, using the string "Width-device" to indicate the device width |
| Initial-scale | Sets the initial zoom value of the page, which is a number that can be taken with decimals |
| Minimum-scale | Allows the user's minimum zoom value to be a number that can be taken with decimals |
| Maximum-scale | Allows the user's maximum zoom value, which is a number that can be taken with decimals |
| Height | Sets the height of the layout viewport, which is not important to us and is seldom used |
| User-scalable | Whether the user is allowed to scale, the value is "no" or "yes", no is not allowed, yes means allow |
| – | – |
| target-densitydpi | The value can be a number or high-dpi, medium-dpi, low-dpi, device-dpi one of several strings |
The last property is unique to Android, and Android has decided to discard the target-densitydpi attribute, so this property should be avoided.
Let's look at the specific code for the mobile-side layout:
<Head><Title>test Page</Title><Script> var devicewidth =parseint (Window.screen.width);Gets the screen width of the current devicevar Devicescale = devicewidth/640;Get the ratio between the current device screen and 640, then we can fix the width of the page to 640pxvar ua = navigator.useragent;Get the current device type (Android or Apple)if (/android (\d+\.\d+)/.test (UA)) {var version =Parsefloat (regexp.$1);if (Version > 2.3) {document.write ( <meta name= "viewport" content= "width=640,initial-scale= ' + Devicescale + ", Minimum-scale = ' + Devicescale + , Maximum-scale = ' + Devicescale + else {document.write ( ' <meta name= "viewport" content= " width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi "/>"); }} else {document.write ( ' <meta name= "viewport" content= " width=640, User-scalable=no ">"); }</script></ HEAD> Go to the usage of meta name= "viewport" in HTML5 different resolution phone scaling
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
