Mobile-screen adaptation scheme

This article source: http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=201811994&idx=1&sn= 1c3bae60e2fe13d3bc3aeecaa6a4ef00&scene=23&srcid=abqlbfgvesx4dgnysdg8#rd

What happens on the mobile side of the website on the PC?

1: If the mobile side of the visible area (320-768), most of the site will be too narrow to show confusion;

2: So the browser by default set the viewport to a wider value of 980px or 1024px, at least to ensure that the PC website can be displayed on the mobile side, but there is only a horizontal scroll bar.

Several concepts

1:css pixels |

The units measured in HTML are calculated using PX, which tends to be 1 css px = 1 physical pixels in the PC

CSS pixels are abstract and relative, the 1px corresponds to different device pixels in different devices, the IPHONE3 resolution is 320*480 that is css 1px = 1 physical pixels, iphone4 resolution 640x960 But the screen size does not change, which means that the same area pixels is 1 time times more CSS 1px = 2 physical pixels;

2: physical pixels

Represents the number of pixels per inch, the higher the value, the higher the density of the screen to display the image

3: Resolution

The more pixels the display can display, the more pixel the monitor displays, the finer the picture, and the more information the same screen area can display

4:devicepixelratio

Window.devicepixelradio = physical pixels/css pixels in iphone4 devicepixelratio=2 is 1css pixels = 2 physical pixels

Devicepixelratio has some compatibility issues with different browsers and is not completely reliable

5:layout Viewport

The default viewport,css layout of a mobile device is a dynamic setting that is calculated as a reference system document.documenElement.clientWidth by layout viewport

6:visual Viewport

Represents the size of the browser window, which becomes smaller when the user zooms in on the browser window.innerwidth get

7:ideal Viewport

Screen size device screen size units are physical pixels

Screen.width Get the screen size is constant

In this viewport the user does not need to zoom and scroll horizontally to see all the contents of the site normally

Set the mobile website generally with this viewport, the width of ideal viewport is equal to the width of the device screen, so that in any resolution, those for the ideal viewport design of the site can be perfectly presented to the user.

How to implement a screen fit

Need to use

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

　　

There are 6 common properties in Meta viewport:

1) Width set layout viewport positive integer or string ' Width-device '

2) Initial-scale Set the initial zoom value of the page, number or decimal

3) Minimum-scale allows the user's minimum zoom value number or decimal

4) Maximum-scale allows the user's maximum zoom value number or decimal

5) Height Set layout viewport, this property is seldom used

6) Whether the User-scaleabel allows the user to scale ' no ' or ' yes ' and 2 two properties that require special attention

7) target-densitydpi in the Andriod 4.0 device, does not support the setting of viewport width,android self-contained browser support settings target-densitydpi to achieve the purpose;

target-densitydpi-ui-width/device-width*window.devicepixeration*160

Ui-width: Layout width
Device-width: Screen resolution iphone4 to 640
TARGET-DENSITYDPI=DEVICE-DPI means using the device's own screen pixels,

Miniual-ui iOS safari for meta table days added properties, the page load is hidden at the top of the address bar and the bottom of the navigation bar

Screen

JS Code Control

Window.addeventlistener ("Orientationchange", function () {this.isorietation = True;this.changeoriention ();});

　　

Mobile-screen adaptation scheme