Mobile high-definition adaptation scheme (to solve image blur problem, 1px thin line problem)

This paper introduces 3 methods of mobile end adaptation, as well as the solution to the problem of image blur and 1px thin line. Of course, prior to this, we sorted out the knowledge related to these methods: physical pixels, device-independent pixels, devices like silverhalide and viewport.

>>>> physical pixels, device independent pixels, and device pixel ratio

In CSS we generally use PX as the unit, it should be noted that the CSS style inside the PX and the physical pixels are not equal. The pixels in the CSS are just an abstract unit, and in different devices or environments, the physical pixels represented by 1px in CSS are different. On the PC side, the 1px of the CSS generally corresponds to the 1 physical pixels of the computer screen, but on the mobile side, the CSS 1px equals several physical pixels that are related to the screen pixel density.

Physical pixels (physical pixel)

Physical pixels are also known as device pixels, device physical pixels, which are the smallest physical display units of a display (computer, phone screen), and each physical pixel consists of a color value and a luminance value. The so-called one-screen, twice-screen (Retina), three times-times screen, refers to how many physical pixels the device displays a CSS pixel, that is, multiple times the screen with more finer physical pixels to display a CSS pixel point, in the ordinary screen 1 css pixels corresponding to 1 physical pixels, On the retina screen, 1 css pixels correspond to 4 physical pixels (see below for the field understanding).

Device independent pixels (device-independent pixel)

Device-independent pixels, also known as CSS pixels, are the pixels we use to write CSS, which is a unit of the image that is used primarily on the browser to accurately measure the content on a Web page.

Unit pixel ratio (device pixel ratio)

The device pixel is abbreviated as DPR, which defines the correspondence between the physical pixels and the device's independent pixels: the device pixel ratio = physical pixel/device independent pixels.

CSS 1px is equal to several physical pixels, in addition to the screen pixel density DPR, but also related to user scaling. For example, when the user enlarges the page by one time, the physical pixels represented by 1px in the CSS will also increase by one time, whereas the physical pixels represented by 1px in the CSS will be reduced by a factor of one time. In this regard, the 1px thin Line Problem section later in the article will also be covered.

>>>>Viewport

Viewport is the area on the device that is used to display the page, but the viewport is not limited to the size of the viewable area of the browser, it may be larger than the viewable area of the browser, or it may be smaller than the viewable area of the browser. By default, the viewport on a mobile device is generally larger than the viewable area of the browser, because the resolution of the mobile device is relatively small compared to the desktop, so that the traditional Web site designed for desktop browsers can be displayed properly on mobile devices. Browsers on mobile devices will set their default viewport to 980px or 1024px (and possibly other values, as determined by the device itself), but with the result that the browser will appear with a horizontal scroll bar, Because the width of the viewable area of the browser is smaller than the width of this default viewport.

Identify three different viewport viewports:

Visual viewport visible viewport, screen width

Layout viewport layouts viewport, Dom width

Ideal viewport ideal palatability, so that the layout of the viewport is the visible viewport is the ideal palatability

Get the size of the screen width (visual viewport):

Window. Innerwidth/height

Get the size of the DOM width (layout viewport):

Document. DocumentElement. Clientwidth/height

Set the ideal viewport ideal viewport:

<name= "Viewport"  content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ">

The META tag's purpose is to make the layout viewport width equal to the width of the visual viewport, while not allowing the user to scale manually to achieve the desired viewport.

Meta[name= "Viewport" in the meaning of the parameters are:

Width: Sets the widths of the layout viewport, as a positive integer, or as the string "Width-device".

Initial-scale: Sets the initial zoom value of the page, which is a number that can be taken with decimals.

Minimum-scale: Allows the user's minimum zoom value, which is a number that can be taken with decimals.

Maximum-scale: Allows the user's maximum zoom value, which is a number that can be taken with decimals.

Height: Sets the altitude of the layout viewport, which is not important to us and is seldom used.

User-scalable: Whether the user is allowed to scale with a value of "no" or "yes".

>>>>REM Adaptation Solutions

The adaptation is to make the page on different mobile devices, relatively maintain a uniform effect. There are many mobile adaptive schemes, such as percent layout, flexible box model layout, etc., but it is best to use the REM layout.

REM is a unit of the font size relative to the root element, and we can dynamically set the root element's font-size based on the device width, allowing REM-based elements to be presented in a relatively consistent visual effect on different terminals. Here are 3 ways to set the REM reference value based on the screen width. (Note: For conversion convenience, the following three methods are used in 1:100 proportion, namely 1rem=100px. ）

Set REM reference value with JS

/*Design Draft is 750, using 1:100 of the ratio, using 1rem to represent 100px,font-size * (clientwidth/750)*/(function(Doc, win) {varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function() {            varClientWidth =Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= * (clientwidth/750) + ' px ';    }; if(!doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false);}) (document, window); 

Set font-size with dense media queries

/* Design Draft is 750, using a 1:100 ratio, with 1rem for 100px,100* (100/750) =13.333 to min-width:750px font-size:100px as the benchmark, min-width every 100px reduction, Font-size is reduced to 13.3333px, if more intensive media queries can be set according to this control relationship. */@media screen and (min-width:320px) {    html {        font-size:42.6667px;    }} @media screen and (min-width:375px) {    html {        font-size:50px;    }} @media screen and (min-width:425px) {    html {        font-size:56.6667px;    }} @media screen and (min-width:768px) {    html {        font-size:102.4px;    }}

Set Font-size with unit VW

1VW equals the width of the screen viewable area (1% of the viewable area.

/* The design is 750, using a 1:100 ratio, using 1rem to represent 100px,font-size as 100* (100vw/750) */html {    font-size:13.3334vw;}

Note: Compatibility is not very good.

After understanding the important concepts of physical pixels, device-independent pixels, devices like silverhalide and viewport, take a look at the two classic issues that result from screen resolution in mobile development: blurred picture problems and 1px thin lines. (Note: For the sake of brevity, the following multiple screens are only twice times the retina screen, the same as other screens.) ）

>>>> picture Blur problem

A bit image element is the smallest data unit of a raster image (e.g. PNG, JPG, GIF, etc.). Each bit image contains some of its own display information (such as: Display position, color value, transparency, etc.). In theory, the 1-bit pixels correspond to 1 physical pixel images for a perfectly clear display. For the retina screen of dpr=2, 1 bit pixels correspond to 4 physical pixel, because the single bit image can not be further segmented, so only the nearest color, resulting in the picture looks more blurred, such as.

For the image blur problem, the better solution is to use multiple times the picture (@2x). such as: a 200x300 (CSS pixel) img tag, for the dpr=2 screen, with the 400x600 image, so that the number of bit pixels is the original 4 times times, in the Retina screen, the number of pixels can be compared with the number of physical pixel points to form a 1:1 ratio, The picture is naturally clear.

What happens if you use a twice-fold picture on a normal screen?

In the ordinary screen, the 200x300 (CSS pixel) img tag, the corresponding number of physical pixels is 200x300, and twice times the image of the number of bits is 200x300x4, so there is a physical pixel point corresponding to 4 bit pixels, But its color can only pass a certain algorithm to take a bit of the color value of the image point, the process is called (downsampling), the naked eye although the picture will not be blurred, but will feel the picture lacks some sharpness, or is a bit chromatic aberration, such as.

So the best solution is: Under different DPR, load different sizes of pictures. Whether through the CSS media query, or through the JS condition can be judged.

>>>>1px thin Line problem

As we already know, CSS pixels are 1px wide straight lines, the corresponding physical pixels are different, may be 2px or 3px, and the designer wants to 1px wide line, in fact, is 1 physical pixels wide, such as.

For CSS, it can be thought of as border:0.5px, which is the smallest unit that can be displayed under multiple times screen. However, not all mobile browsers can recognize border:0.5px, in some systems, 0.5px will be treated as 0px, then how to achieve this 0.5px? Online There are many solutions, such as border-image pictures, background-image gradient, Box-shadow, etc., because these programs are not very good, so do not repeat, I recommend two ways: using media query according to DPR with "pseudo-element +transform" Use JS to precisely set the Rem datum and Initial-scale scaling values for different screens based on screen size and DPR.

Pseudo element +transform

Build 1 pseudo-elements, border to 1px, then transform to 50%.

/* Design Draft is 750, using 1:100 ratio, font-size for 100* (100vw/750) */.border-1px {    position:relative;} @media screen and (-webkit-min-device-pixel-ratio:2) {    . border-1px:before {        content: "";        Position:absolute;        left:0;        top:0;        width:100%;        height:1px;        border-top:1px solid #D9D9D9;        Color: #D9D9D9;        -webkit-transform-origin:0 0;        transform-origin:0 0;        -webkit-transform:scaley (0.5);        Transform:scaley (0.5);    }}

Use JS to calculate REM reference and viewport scaling values

/*The design Draft is 750, using 1:100 of the proportion, Font-size * (Docel.clientwidth * dpr/750)*/varDPR, REM, scale;varDocel =document.documentelement;varFontel = document.createelement (' style '));varMetael = Document.queryselector (' meta[name= "viewport"]);DP R= Window.devicepixelratio | | 1; REM= * (Docel.clientwidth * dpr/750); scale= 1/DPR;//set viewport, zoom to achieve high-definition effectMetael.setattribute (' content ', ' width= ' + DPR * docel.clientwidth + ', initial-scale= ' + scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no ');//set DATA-DPR properties, reserved for CSS hack, solve image blur problem and 1px thin line problemDocel.setattribute (' DATA-DPR ', DPR);//Dynamic Write StyleDocEl.firstElementChild.appendChild (Fontel); fontel.innerhtml= ' html{font-size: ' + rem + ' px!important;} ';

Compared with the "Use JS to calculate REM reference value" in the REM adaptation scheme above, this "use JS to calculate REM reference value and viewport scaling value" solution can solve the 1px thin line problem. The table is compared to twice times the retina screen, the same as the other multi-fold screen.

With JS according to the screen size and DPR to accurately set the different screen should have the REM benchmark value and Initial-scale scale value, this JS solution has been perfectly solved 1px thin line problem, we do not need to do anything, as for the picture Blur problem, It is only possible to dynamically load the graphs of different sizes according to the values of the DATA-DPR.

Share a public number-----front-end Mala Tang, a focus on the front-end technology learning and communication of the public number ~

Search for "websnacks", or scan the QR code below.

Mobile high-definition adaptation scheme (to solve image blur problem, 1px thin line problem)