H5 Mobile End Adaptation flexible scheme _javascript technique

First, the mobile end of some concepts

Visual Draft (choose a phone's screen height as the benchmark)

Before the front-end development, visual mm will give us a PSD file, called Visual manuscript.

For mobile end development, in order to achieve the effect of the page HD, visual Draft norms will often follow the following two points:

1 First, choose a mobile phone screen width as the benchmark (formerly IPhone4 320x480, now more is Iphone6 375x667).

2 for Retina screen (such as: dpr=2), in order to achieve high-definition effect, visual draft canvas size will be twice times the benchmark, that is, the number of pixels is 4 times times the original (for Iphone6: The original 375x667, it will become 750x1334).

Problem:

For dpr=2 mobile phones, why is the canvas size X2 to solve the HD problem?

For twice times the size of the visual manuscript, in the specific CSS encoding how to restore the true width of each chunk (that is, layout problems)?

Annotated draft

Moving End Dimensions

Physical pixels (physical pixel)

A physical pixel is the smallest physical display unit on the display (mobile screen), and each device pixel has its own color and brightness values under the operating system's schedule.

Device independent pixel (density-independent pixel)

Device independent pixels (also called density-independent pixels) can be considered a point in the computer's coordinate system, which represents a virtual pixel (such as a CSS pixel) that can be used by the program and then converted to physical pixels by the associated system.

Device pixel ratio (device pixel ratio)

The device pixel ratio (DPR) defines the corresponding relationship between the physical pixel and the device independent pixel, and its value can be obtained in the following formula: Device pixel ratio = physical pixel/device independent pixel//in a certain direction, x direction or y direction.

In JavaScript, you can obtain the DPR of the current device through window.devicepixelratio .

In CSS, you can use-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio and-webkit-max-device-pixel-ratio to make media inquiries, for different DPR devices, make some style adaptations (this is only for browsers and WebView for the WebKit kernel).

Under the normal screen, 1 css pixels correspond to 1 physical pixels (1:1). Under the Retina screen, 1 css pixels correspond to 4 physical pixels (1:4).

Example: width:2px;height:2px; As follows

-bit Image Element

A bit image element is the smallest data unit for raster images (such as PNG, JPG, GIF, etc.). Each bit of the image element contains some of its own display information (such as: Display position, color value, transparency, etc.).

Retina the Picture Show?

In theory, the 1-bit pixel corresponds to 1 physical pixels, the picture can be perfectly clear display.

In the ordinary screen is not a problem, but in the retina screen will appear bit image element point is not enough, resulting in blurred picture situation.

As shown above: For dpr=2 's Retina screen, the 1-bit pixel corresponds to 4 physical pixels,

Because a single bit of the image element can not be further split, so only the nearest color, resulting in blurred picture (note the above several color values).

Therefore, for the picture HD problem, the better solution is twice times the picture (@2x). For example: 200x300 (CSS pixel) img tag, you need to provide 400x600 pictures.

So, pixel pixel number is the original 4 times times, in the Retina screen, the number of pixel pixels can be with the number of physical dots to form a ratio of 1:1, the picture is naturally clear (this also explains the previous question, why the visual manuscript of the canvas size to X2?) )。

Here is another question, if the ordinary screen, also used twice times the picture, what will it be?

Obviously, in the ordinary screen, 200x300 (CSS pixel) img tag, the corresponding number of physical pixels is 200x300, and twice times the number of images of the image is 200x300*4, so there will be a physical pixel points corresponding to 4 bits of pixels,

So its color can only pass a certain algorithm (the display result is only the original image element Total One-fourth, we call this process called downsampling, and the naked eye looks as though the picture is not blurry, but the picture lacks some sharpness, or a bit of chromatic aberration (but still acceptable).

Retina, Picture HD problem

So the best solution is: under different DPR, load different dimensions of the picture.

Whether it's through CSS media queries or JavaScript conditions, it's OK. So the problem is, so, is not to prepare two sets of pictures? (@1x and @2x)

I think, do a good company, there will be such a picture server, get the parameters through the URL, and then you can control the quality of the picture, you can also cut the picture to different sizes.

So we just upload large image (@2x), the rest of the small picture is to the image server processing, we just have to be responsible for splicing URL.

Retina, border:1px problem

The designer wants to retina under border:1px, in fact, is 1 physical pixel width, for CSS, can be considered to be border:0.5px, this is retina under (dpr=2) can display the smallest units.

However, not all mobile browsers can identify border:0.5px;,ios7 below, Android and other systems, 0.5px will be treated as 0px, then how to achieve this 0.5px?

Scenario One: The simplest approach is this (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;}

Programme one question:

by Transform:scaley (. 5) to reduce 0.5 times times to achieve the effect of 0.5px, but this hack is not universal (such as: rounded corners, etc.).

Scenario Two: page scale scheme, is more general, almost meet all the scenes.

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

Page scale, will inevitably bring some problems:

1 font size will be scaled

2 page layout will be scaled (such as: div width and high)

Two, multiple screen fitting layout problem

Flexible programme

1) Download Bower download lib-flexible

To load a flexible_css.js,flexible.js file into your project:

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

or directly loaded Ali Cdn's files:

Copy Code code as follows:

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

2). Flexible actually function
is to be able to cross JS to dynamically rewrite meta tags, the code is similar to this:

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 these things:
Add <meta> tags, and dynamically overwrite <meta> tags
Add the Data-dpr property to the Add the Font-size property to the

3. Layout (take Scss as an example)

1) Basic layout: REM

Converts the PX units in the visual draft into REM units:

HTML element size = Visual Manuscript px value/rem datum value

For example: Visual draft width 750px, then the magnification in HTML is 750/10 = 75, and then this is the base value, if the visual draft of a small piece of content width is 150px, the HTML content width is 150/75 = 2rem

2) font size: px

The font size is in PX units, and the [DATA-DPR] property is used to distinguish the text font size under different DPR.
In order to better facilitate the development, in the actual development, we can customize a FONT-DPR () SASS Mixed macros:

@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 you set up a blend macro, you can use it directly in development:@include FONT-DPR (24px);

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.