I. Introduction
Sometimes you need to do to move the front end high-definition display, 1, the face of the development of mobile end H5 page 2, in the face of mobile phones with different resolutions, 3, face different screen sizes of mobile phone.
Second, visual artwork
Normal front-end development, the vision of a small brother to us or exported skech psd file, this is the vision draft, and then began to write front-end structure, the write element, adjustment, optimization and so on.
For mobile-side development, the results reach the page definition, visual draft norms tend to follow these two points:
(1) select a phone's screen width and height as a reference (formerly iphone4 320 * 480, now more iphone6 of 375 * 667).
(2) screen for the retina (more pixels may be compressed to a point where the screen, resulting in higher resolution and enhance the degree of detail displayed on the screen) (eg: dpr = 2), in order to achieve the effect of high-definition, visual draft the canvas size would be 2 times the reference, i.e. the number of pixels is four times the original (for example iphone6, the original 375 * 667, 1334 * 750 becomes).
There are certainly questions: (1) why dpr = 2 mobile phone, why canvas size * 2, we can solve the problem definition? (2) to 2 times the size of the visual artwork, specific css each block is how to restore the true width and height (layout problems)?
Third, the basic concept
1, physical pixel : pixel is on a physical display (screen phone) minimum physical display unit , under the operating system scheduler, each device has its own color pixel values and luminance values.
2, the device independent pixels : independent pixel device is also called density-independent pixels, can be regarded as a computer coordinate system to give a point, dummy pixel at this point represents a may be used by the program (for example: CSS pixels), and then by the related system conversion physical pixels.
Therefore, there is a certain correspondence between the physical pixels and the device-independent pixels, that is to say a device pixel ratio .
3, device pixel ratio : ratio of the pixel devices (abbreviated as DPR) defines the individual pixels and device pixels corresponding relationship between the physical, its value can be obtained is calculated according to the formula:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向In javascript, by window.devicePixelRatio obtain the current method dpr device.
In css by -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio for media query, dpr for different devices, and to do some appropriate style with (mainly for webkit browser kernel and webview).
4, for example
To iphone6 example:
(1) Device width 375 * height 667, it can be understood as individual pixels apparatus (CSS pixels);
(2) 2 DPR, calculated according to the above formula, should be the 750 physical pixels * 1334.
With a picture to show and that's it (forgive my Pirates):
On different screens (normal screen vs retina screen), css pixels rendered size is the same, except that a corresponding pixel css physical pixel number is inconsistent.
Under normal screen, a pixel corresponding to a physical css pixels ( 1:1). In the retina of the screen, a pixel corresponds css four physical pixels ( 1:4).
5, the pixel bitmaps
Bitmap is a raster image of pixels (eg: png, jpg, gif, etc.) smallest unit of data. Each bitmap pixel display itself contains some information (such as: a display position, color values, transparency, etc.).
In theory: a bitmap pixel corresponds to a physical pixels, picture perfect to get a clear display. .
Normal screen no problem, but in the retina screen will appear bitmap pixel enough, causing a blurry picture of the situation.
Look at a map:
As shown: For purposes dpr = retina screen 2, a pixel bit map for the four physical pixels, because the image pixels can not be a single bit in the partition, taking only the nearest color, resulting in blurred images.
So for high-definition picture of the problem, a better solution is to double images (length and width increased to 2 times) .
Such as: 200 × 300 (css pixel) img tag, it is necessary to provide 400 × 600 images.
So down bit pixel point number is quadrupled, retina at the screen, the number of pixel bitmaps can be formed with the number of physical pixels 1: 1 ratio, clear images naturally, to solve the first question.
If there is, under normal screen, also with twice the picture, what will happen?
Obviously, under normal screen, 200 × 300 (css pixel) img tag, the physical number of pixels corresponding to that 200×300one, and 两倍图片the bits of the number of pixels in FIG 200×300*4, so there a physical pixels corresponding to 4 bits Figure pixels, it can only take color through a certain algorithm (the result is a display only original total number of pixels quarter, we call this process is called downsampling(downsampling, reducing process data sampling rate or resolution )) . Although the picture does not blur the naked eye, but will feel that the picture lacks some sharpness , or a little color (but still acceptable).
IV Summary
H5 mobile terminal development, will encounter several classical problems at different resolutions, different screen mobile phone
1, under the retina, high-definition picture of the problem
As already mentioned the solution: the length and width of the picture twice, and then the picture container reduced by 50%.
such as:
1, img tags
width: 200px;
height: 300px;2, background images
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;The disadvantage is that under normal screen:
1, download the same length are 2 times the picture, resulting in a waste of resources.
2, Picture downSampling, lose some sharpness (or color).
So the best solution: different dpr, loading different picture sizes.
Whether through css media queries, or by js condition judgments are possible. It is necessary to prepare two sets of pictures.
2, under the retina, border: 1px problem
1px pixels designer with his eyes, are most concerned about.
Or be explained by a diagram (Figure Pirates forgive me again):
Figure above, for a 1pxwide straight line, physical dimensions thereof (gray area) on the screen are indeed the same, in fact different physical minimum unit on the screen, i.e. physical pixels, so for a straight line, it iPhone5 the minimum width of the display is actually out of the coil in FIG red gray area represented by css, theoretically is 0.5px.
So, the next designer wanted Retina border: 1px;, in fact, a physical pixels wide, for css, it can be considered border: 0.5px;that this is the smallest unit at lower retina (dpr = 2) can be displayed.
However, not all helpless mobile browser can identify border: 0.5px;, ios7 less, in other systems such as android, 0.5px will be become 0px when handled, how to achieve this 0.5pxit?
The easiest way is this a ( 元素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;
}We write as usual border-bottom: 1px solid #ddd;, and then through the transform: scaleY(.5)narrow 0.5-fold to achieve 0.5pxthe effect, but this hack is really not general enough (such as: fillet, etc.), but also to write the trouble.
Or you can use js to determine whether the current browser supports border of 0.5px, if support will add a class name hairlines on HTML ,
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}css
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
V. REFERENCE
1、http://www.smashingmagazine.com/2012/08/20/towards-retina-web/
2、http://www.paintcodeapp.com/news/iphone-6-screens-demystified
3、http://iconmoon.com/blog2/iphone-6-plus-screen-size/
4、http://dieulot.net/css-retina-hairline