Mobile Adaptation – Basics

This is a series of three articles:

• Mobile Adaptation – Basics Understand why there are mobile adaptation issues
• Mobile adaptation – How to solve the problem of picture hd, 1px border, layout adaptation and content adaptation step by step
• Mobile adaptation – Rem layout a concise version of the previous two

unit

Units in CSS

Absolute unit

• px
  • Related to the device screen
  • For normal screens, usually a device pixel (point) of the display
  • For printers or high-resolution screens, one CSS pixel corresponds to multiple device pixels

Units in ios

• pt
• px

Pixel

Device independent pixel DIP

Virtual pixels used and controlled by an application, such as CSS pixels (PX) in Web programming, device independent pixels in Android (DP), and ios (PT).

CSS pixel

CSS pixels are concepts in Web programming, abstract units used by browsers. Typically, CSS pixels are called device-independent pixels (DIPs). On a standard density display, one CSS pixel corresponds to one device pixel.

Such as:

<div height="200" width="300"></div>
Copy the code

Draw 200×300 device pixels on a normal screen, and 400×600 device pixels on a Retina display to ensure the same physical size for the same div, so there are four times as many device pixels on the same physical surface as on a normal retina display.

Device pixel and device independent pixel

There is a certain correspondence between device pixels and device independent pixels. We control device independent pixels when programming, and then transform them into physical pixels by relevant systems.

How many device pixels a CSS pixel equals depends on the screen characteristics (whether it is high density or not) and the scaling ratio. The larger you zoom in, the more pixels a CSS pixel will cover on your device.

Screen Density

Screen pixel density is the number of pixels on a physical surface, usually measured in pixels per inch (PPI). The higher the PPI, the better the picture.

Apple coined the marketing term “Retina” for its dual-density display, claiming that the human eye can no longer distinguish pixels on the screen from the “natural” viewing distance.

To calculate the screen pixel density (pixels per inch) of your monitor, first determine the screen size and resolution.

Apple’s iphone6s, for example, has a pixel resolution of 1334 x 750 and a diagonal length of 4.7 inches.

The screen pixel density is:

Apple believes the highest pixel density a human can see with the naked eye is 300ppi

There are also a growing number of high-resolution Android phones that have the same retina display as Apple’s iPhone. Android developers have divided tablet and phone screens into five categories, based on the number of pixels per inch:

Device pixel ratio DPR

• Ratio of the physical pixel resolution to the CSS pixel resolution when the zoom ratio is 1
• It can be passed in JSwindow.devicePixelRatioGet, can also be overriddenwindow.devicePixelRatioTo change the DPR
• You can use media to query device-pixel-ratio in the CSS

Bitmap Pixel

Bitmap pixels are the smallest units in raster-based images (JPG, PNG, GIF). Each pixel contains on-screen display information such as position, color, etc. Some image information also contains opacity (Alpha Channel).

In addition to its raster resolution, bitmap images have an abstract size defined in CSS pixels in web pages. Web browsers draw raster-based images on the screen according to the height and width properties set by CSS, and may squeeze or stretch the image according to the CSS size.

When raster images are drawn at full size on standard density displays, each bitmap pixel corresponds to each device pixel, and the image is displayed in full fidelity. Since bitmap pixels cannot be further divided, a Retina display should have four times as many bitmap pixels as a standard display for true HD display.

For example, to display a 200 x 300 pixel image (which is a CSS pixel), you can ask the server for a bitmap resolution of 400 x 600 pixels (4 times).

<img src="https://img.meituan.net/beautyimg/0e03672ea40f4f692f193349b86aeb90299167.jpg%40400w_600h_1e_1c_1l_100q%7Cwatermark%3D0"/>
Copy the code

img{
	width:200px;
	height: 300px;
}
Copy the code

On a standard density display, there is a downsampling process. For bitmap images with 400×600 pixels, to display on 200 x 300 device pixels, it needs to be downsampled twice to get a (400/2) x (600/2) resolution image. That is to convert the bitmap pixels in the 2 x 2 window into one pixel, and the value of that pixel is the average of all the pixels in the window.

Image sampling principle

For an image I size of M_N, it is sampled s times down, that is, the resolution image of the size of (M/s)_(N/s) is obtained, of course, S should be the common divisor of M and N. If the matrix form of the image is considered, it is to transform the image in the window of the original image S * S into a pixel. The value of this pixel is the mean of all pixels in the window: pk = ∑ I ∈ Win (k)Ii/s2

Image up-sampling principle

Image amplification is almost always by interpolation, that is, on the basis of the original image pixels between the use of appropriate interpolation algorithm to insert new elements.

In order to display the image in hd fidelity on the Retina display, you need to load a 2x image. However, for standard display devices, there are several problems if the same 2x image is used:

• Need to download larger picture resources, resulting in a waste of resources
• Depending on the downsampling algorithm used, a 2x image will lose some sharpness on a standard density screen

This is how to display images in HD fidelity on mobile devices with different resolutions. Devices with different screen densities should load images of different sizes to ensure fidelity on different devices.

The hd display of pictures on the mobile terminal fails

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url([email protected]); }}Copy the code

DPR queries use 1.5 instead of 2, and you can use the same statement to query other non-Apple devices. This method is mainly used for images displayed with background-image attributes.

advantages

• The device downloads only the appropriate target resource
• Cross-browser compatibility
• Pixel precision control

disadvantages

• Programming code is cumbersome, especially on large sites
• This is not semantically correct for a content-presentation image to be displayed as a background for other HTML elements

Js controls the loading of images of the appropriate size

You can query DPR in Javascript using window.devicepixelRatio, which makes it easier to set up images than CSS. However, rendering can be delayed due to the use of JavaScript.

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var images = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace("."."@2x.");
      $(this).attr('src', highres); }); }});Copy the code

This is a good way to show content-oriented images.

advantages

• Easy to implement
• Non-retina devices do not need to download large image resources
• Pixel precision control

disadvantages

• Retina devices must download 1x and 2x graphics
• Image replacement is available on Retina devices
• DevicePixelRatio does not support Internet Explorer or Firefox.

<img src="sample.svg" width="300" height="200" />
Copy the code

reference

• Wikipedia – Pixels per inch
• Points per inch
• DevicePixelRatio Browser compatibility
• Towards A Retina Web
• Image zooming
• MathML formula editor

viewport

There is only one viewport in a desktop browser, and the width of the viewport is equal to the width of the browser window. On small-screen mobile devices (240px to 640px wide), web pages designed for desktop browsers will look ugly on mobile devices if the viewport width is the same as the browser width, so mobile browser makers will set a default viewport width between 768px and 1024px for mobile devices. The most common width is 980px.

Layout viewport

CSS layout will be calculated according to the viewport described above, so on mobile this is called layout viewport.

Visual viewport

While the default layout viewport width on mobile makes web pages designed for desktop browsers look good, only a portion of the content is displayed in the viewport area, known as the visual viewport. The user can manipulate the visual viewport by zooming.

<meta name="viewport" content="width=device-width"/>
Copy the code

reference

• Mobile Web Manual

Meta tags

The width of the layout viewport is declared using the meta tag. Common attributes of the meta tag:

For the viewPort meta tag format:

<meta name="viewport" content="key=value, key=value"/>
Copy the code

Contents:

• width: Layout viewport width (numeric/device-width) (range from 200 to 10,000, default is 980 pixels)
• height: Layout viewport height (value/device-height) (range from 223 to 10,000)
• initial-scale: Initial scaling (range >0 to 10)
• minimum-scale: The minimum scale to which the user is allowed to zoom
• maximum-scale: Maximum scale to which the user is allowed to zoom
• user-scalable: Whether the user can manually indent (no,yes)

For mobile pages, the layout viewport width is usually set to the ideal viewport width and no zoom is allowed:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>
Copy the code

Media queries

Media Query Type

• Media Type Query
• Viewport related
• Features related to

grammar

@media Media type and (viewport property threshold){// CSS style code that meets the condition}Copy the code

Media Query Example

.sample {
    background-image: url(sample.png);
    width: 300px;
    height: 200px;
}
 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
  only screen and (-moz-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5) {
    .sample {
        background-image: url([email protected]); }}Copy the code

More usage References

• W3C’s introduction to media queries
• W3C Media query standard