H5 mobile terminal adaptation and h5 mobile Adapter

H5 mobile terminal adaptation and h5 mobile Adapter

I. Concepts of Mobile Terminals

• Visual draft (Select the screen width and height of a mobile phoneBenchmark)

Before front-end development, visual MM will give usPsdFileCalledVisual draft.

For mobile development, in order to achieve the page HD effect, the specifications of visual drafts often follow the following two points:

1) First, select the screen width and height of a mobile phoneBenchmark(It used to be 320x480 of the iPhone 4, but now it is 375x667 of the iPhone 6 ).

2) For retina screens (such as dpr = 2 ),Canvas sizeIt will be twice the benchmark, that is to say, the number of pixels is four times the original number (for iPhone 6: the original 375x667 will change to 750x1334 ).

Problem:

Why can I solve the problem of HD when the canvas size is × 2 for mobile phones with dpr = 2?

How can I restore the true width and height of each block (that is, the layout problem) of a visual draft of 2 times the size in a specific css code )?

• Tagging

• Mobile Terminal size

Physical pixel (physical pixel)

A physical pixel is the smallest physical display unit on the display (mobile phone screen). Under the scheduling of the operating system, each device pixel has its own color value and brightness value.

Device independent pixel (density-independent pixel)

Device Independent pixels (also called density independent pixels) can be considered as a point in the computer coordinate system. This point represents a virtual pixel (such as css pixel) that can be used by the program ), then it is converted from the relevant system to the physical pixel.

Device pixel ratio)

The device pixel ratio (dpr) defines the correspondence between the physical pixel and the independent pixel of the device. The value can be obtained according to the following formula: device pixel ratio = physical pixel/device independent pixel // on one side up, x or y.

In Javascript, you can useWindow. devicePixelRatioObtain the dpr of the current device.

In css, you can use-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio, and-webkit-max-device-pixel-ratio to query media, make some style adaptation for devices of different dpr (here only for browsers and webviews of the webkit kernel ).

On a normal screen,1ItemsCssPixel correspondence1Physical pixels(1:1). InRetinaUnder the screen,1ItemsCssPixel correspondence4Physical pixels(1: 4).

For example, width: 2px; height: 2px;

• Bitmap pixels

OneBitmap pixels are raster images(For example, png, jpg, and gif)Minimum Data Unit. Each bitmap pixel contains some display information (such as the display position, color value, and transparency ).

What is the retina display?

In theory, a bitmap pixel corresponds to a physical pixel, so that the image can be displayed perfectly and clearly.

There is no problem on the normal screen, but there will be insufficient bitmap pixels on the retina screen, resulting in blurred images.

For example, for a retina screen with dpr = 2, one bitmap pixel corresponds to four physical pixels,

A single bitmap pixel cannot be further divided, so it can only be colored nearby.To blur the image (pay attention to the preceding color values ).

Therefore, for image HD, a better solution is to double the image (@ 2x ). For example, the 200x300 (css pixel) img Tag Requires 400x600 images.

As a result, the number of Bitmap pixels is four times the original number. On the retina screen, the number of Bitmap pixels can be 1 to 1 with the number of physical pixels, the image is naturally clear (this also explains a question left behind, why is the canvas size of the visual draft × 2 ?).

There is another problem here. What if I use a double image under a normal screen?

Obviously, on a normal screen, the number of physical pixels corresponding to the 200x300 (css pixel) img tag is 200x300, two times the number of Bitmap pixels is 200 × 300 × 4, so a physical pixel corresponds to four bitmap pixels,

So its color can only pass through a certainAlgorithm(The result is only 1/4 pixels in the source image. We call this processDownsampling), Although the image is not blurred to the naked eyeLack of sharpnessOr a little chromatic aberration (but acceptable ).

• IMG problems in Retina

So the best solution is:Different Dpr To load images of different sizes.

It can be determined either through css media queries or through javascript conditions. So the question is, isn't it necessary to prepare two sets of images? (@ 1x and @ 2x)

I think there will be such a good company.Image ServerYou can get parameters through the url, and then control the image quality or crop the image to different sizes.

Therefore, we only need to upload a large image (@ 2x), and the remaining small images are handed over to the image server for processing. We only need to splice the URLs.

Border: 1px in Retina

The designer wants border: 1px under retina, which is actually 1 physical pixel width. For css, it can be considered as border: 0.5px;, which is under retina (dpr = 2) the smallest unit that can be displayed.

However, not all mobile browsers can recognize border: 0.5px;, less than ios7, and in other android systems, 0.5px will be treated as 0px. How can we achieve this?

Solution 1: The simplest way is as follows (Element Scale ):

. Scale {position: relative ;}

. Scale: after {content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 1px solid # ddd;-webkit-transform: scaleY (. 5);-webkit-transform-origin: 0 0 ;}

Solution 1:

Reduce the size by 0.5 times through transform: scaleY (. 5) to PX, but the hack is not general enough (such as rounded corners ).

Solution 2: Page Scale The solution is more common and meets almost all scenarios.

For iPhone 5 (dpr = 2), add the following meta tag and set viewport (scale 0.5 ):

PageScale, Will inevitably bring about some problems:

1) the font size is scaled.

2) The page layout is scaled (for example, the width of the div is higher)

Ii. multi-screen Adaptive Layout

• Flexible Solution

1) download bower to download lib-flexible

Load the flexible_css.js and flexible. js files to the project:

    　<script src="lib/flexible.js"></script>    　<script src="lib/flexible_css.js"></script>

　　　　Or directly load Alibaba CDN files:

 

　　　<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

 

　　　　2).flexibleActual Function

It means dynamic rewriting through JS.metaThe code is similar to the following:

 

　　　　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 + ', user-scalable=no');　　　　if (docEl.firstElementChild) {　　document.documentElement.firstElementChild.appendChild(metaEl);　　　　} else {　　var wrap = doc.createElement('div');　　wrap.appendChild(metaEl);　　documen.write(wrap.innerHTML);　　　　}

 

　　　　In fact, he did the following:

• • Add<meta>Label and dynamic rewrite<meta>Tag
  • ToAdd Elementdata-dprAttribute and dynamic Rewritingdata-dprValue
  • ToAdd Elementfont-sizeAttribute and dynamic Rewritingfont-sizeValue

 

 

3. layout (take scss as an example)

1) basic layout: rem

Convert the px Unit in the visual draft to the rem unit:

Html element size = visual draftPx value/Rem reference value

For example, if the width of the visual draft is 750/10 PX, the zoom ratio in html is = 75, and the reference value is as follows: if the width of a small part of the visual draft is PX, the width of the content in html is 150/75 = 2rem.

2) font size: px

The font size is in px units and is used as needed[data-dpr]Attribute to differentiatedprText font size.

In order to better facilitate development, we can customize font-dpr()Sass hybrid macro:

　　　　@mixin font-dpr($font-size){
  　　　　font-size: $font-size;
  　　　　[data-dpr="2"] & {
  　　　　  font-size: $font-size * 2;
　　　　  }
　　　　  [data-dpr="3"] & {
 　　　　   font-size: $font-size * 3;
　　　　  }
　　　　}

After setting a hybrid macro, you can directly use it in development as follows:

　　　　@include font-dpr(24px);

If you have any errors or have any questions, please leave a message!