Mobile flexible set (not to be continued)

1. Ideas

1) Select a dimension as the design and development benchmark

2) define a set of adaptation rules, automatically adapt to the remaining two sizes, in fact, more than two

3) Special adaptation effect gives

2. Basic Concepts

1) Physical pixels

2) device-independent pixel DP is associated with screen density, which can be used to help differentiate whether a retinal device is

3) CSS pixel (dpis) abstract unit, used on the browser, used to accurately measure the content of Web pages.

4) screen density (PPI) The number of pixels that exist on a device surface, calculated as many pixels per inch.

5) device pixel ratio (DPR) physical pixel/device independent pixel

--Window.devicepixelratio gets the DPR of the current device

---Webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio for media inquiries, Make a few adaptations to different DPR (just WebKit and WebView)

Example: IP6 device wide 375*667, which can be understood as a separate pixel of the device. Its DPR is 2, the physical pixel is, 750pt*1334pt;

An element CSS is

width:200px;height:200px;

The physical dimensions of CSS pixels on different screens are consistent, but the difference is that the physical pixels corresponding to the CSS pixels are inconsistent.

Normal screen 1 css pixels corresponding to 1 physical pixels

Retina screen 1 css pixels corresponding to four physical pixels

6) heavy dependency after viewport meta tag

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

7) REM

3. Specific programmes

Approximate principle

--Dynamically rewrite META tags--add DATA-DPR attribute to HTML, dynamically overwrite DATA-DPR value--Add Font-size property to HTML, dynamically overwrite Font-size value

1) Library lib-flexible

Principle: In all JS execution before the loading of this JS, will add a DATA-DPR attribute on the HTML tag, and a font-size style, JS will be based on different devices to add different DPR, while adding the corresponding Font-size value to the HTML, So all the elements in the page can be set by REM,

Note: You can also force the initial-dpr=2 to be set by <meta name= "flexible" content= "/>" DPR, not recommended

2) Set the DPR scheme

if (!DPR &&! ) Scale) {  var isandroid = Win.navigator.appVersion.match (/android/gi);  var isiphone = Win.navigator.appVersion.match (/iphone/gi);  var devicepixelratio = win.devicepixelratio;  If (isiphone) {    //iOS, for 2 and 3 screens, use twice times the scheme, the remaining 1 time times the scheme    if (devicepixelratio >= 3 && (!DPR | | DPR >= 3< c11>) {DPR = 3;} else if (Devicepixelratio >= 2 && (!DPR | | DPR >= 2)) {DPR = 2;} else
           
             {DPR = 1
            ;}} else {//Other devices, still using 1 time times the scheme DPR = 1;} scale = 1/ DPR;}    
           

3) dynamically overwrite meta tags

var Metael = doc.createelement (' meta '); var scale = Isretina? 0.5:1; Metael.setattribute (' name ', ' viewport ') Metael.setattribute (' content ', ' initial-scale= ' + scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', US Er-scalable=no '); if (docel.firstelementchild) {  Document.documentElement.firstElementChild.appendChild (Metael);} else {var wrap = doc.createelement (' div '); Wrap.appendchild (Metael); Documen.write (wrap.innerhtml);}  

Mobile flexible set (not to be continued)