Detailed explanation of mobile terminal adaptation principle and scheme

Mobile adaptation refers to pages that are reasonably displayed (responsive) or equally scaled (looking similar) across different sizes of mobile devices. This paper introduces the basic concepts to be mastered in mobile adaptation and the adaptation schemes commonly used in mobile page development.

1. Basic Concepts

Before we do mobile adaptation, we need to understand how the display or screen is different from one device to another. There are many concepts related to this, and it is particularly confusing. Here we will introduce the main concepts involved one by one. These include concepts in hardware, concepts in operating systems or software, and concepts in browsers.

If you feel confused, don’t worry, take the iphone6 as an example and savor it.

1. Hardware concept

The screen size

Take iPhone6 for example, its screen size is 4.7 inches, which means that the diagonal length of the screen is 4.7 inches, 1in = 2.54cm.

Screen resolution (physical resolution, device resolution)

The iPhone6, for example, has a screen resolution of 750 x 1334, meaning it has 750 pixels horizontally and 1,334 vertically.

Device pixels (physical pixels)

Device Pixels is the tiniest physical part of a display Device. It corresponds to the Device resolution mentioned above.

Pixels Per Inch

The iPhone6, for example, has a screen pixel density of 326ppi, which is 326 pixels per inch.



The calculation formula is as follows:



Note that pixel density is not the number of pixels per square inch, but the number of pixels per inch along a straight line, horizontal or vertical. For example, an iPhone6 with a screen width of 2.3 inches and a height of 4.1 inches would have a pixel density of 750/2.3 = 326 or 1334/4.1 = 326.

2. System concept

Display resolution

Usually, THE PC display resolution can be set, display resolution refers to the system or user set resolution. Users can modify the display resolution, modify the system font size. Typically, the display resolution is less than or equal to the device resolution. My MacBook Pro (13-inch, 2020), for example, has a device resolution of 2560 x 1600 and a default resolution of 1440 x 900. Users can also set their resolutions to 1680 x 1050, 1280 x 800, 1024 x 640, and more. System setting resolution is converted by algorithm. When the user sets different resolution, the system will automatically fit according to the ratio of display resolution and physical resolution. For example, if the physical resolution is 2560 x 1600, and the user sets the display resolution to 1280 x 800, one display pixel will be displayed by four physical pixels; If the user sets the resolution to 1440 x 900 and the ratio of physical resolution to display resolution is not an integer, the system will calculate and fit the display based on the color value and brightness of each pixel.

Device-independent pixels (logical pixels)

Device Independent Pixels (also known as Device Independent Pixels, Density Independent Pixels, or DIP or DP) is a physical unit of measurement. Computer-controlled coordinate systems and abstract pixels (virtual pixels) are used by programs of the underlying system and converted into physical pixels. A device-independent pixel can simply be thought of as a point in a computer coordinate system. The typical use is to allow mobile device software to extend information display and user interaction to different screen sizes. Allows an application to measure in abstract pixels, and the underlying graphics system converts the application’s abstract pixel measurements into physical pixels appropriate for a particular device.

Logical resolution

Logical resolution is expressed as width x height of the screen (in device-independent pixels).

The values from screen.width/height are the width and height of the entire screen (not just the browser area) in device-independent pixels. In PC, this value is the size of the display resolution set by the system. This value does not change with page scaling or browser window size. For mobile, this value can be found in Chrome Developer Tools, which opens mobile debugging and displays the logical resolution at the top of the page. The iPhone6, for example, has a logical resolution (number of device-independent pixels) of 375 × 667.

3. Concepts in browsers

Device Pixel ratio (DPR)

A device-independent pixel can be simply thought of as a point in a computer coordinate system, while a physical pixel can be simply thought of as a point in the display hardware. So what’s the relationship between them? The device pixel ratio is a concept that represents the relationship between the two. The device pixel ratio is the ratio of the physical pixels of the device to the individual pixels of the device. It can be obtained from window.devicepixelRatio in JS. It can be simply understood as: the ratio of the size of a point in hardware to the size of a point in the system. For a fixed device, this value is fixed. The iPhone6, for example, has a device pixel ratio of 2, which means the ratio of its physical pixels to its logical pixels is 2.

Of course, there are some exceptions. The actual physical pixel of iphone6/7/8Plus is 1080×1920, which can be seen in the developer tools: Its device-independent pixels are 414×736 and the device pixel ratio is 3. The product of device-independent pixels and device pixel ratio is not 1080×1920, but 1242×2208. In fact, the phone will automatically render by squeezing 1242×2208 pixels into 1080×1920 physical pixels, which we don’t care about. 1242×2208 is called the design pixel of the screen.

Viewport

The viewport concept is usually applied to mobile devices. Generally speaking, there are three kinds of viewports: layout viewport, visual viewport and ideal viewport, which play a very important role in screen adaptation.

1. Layout Viewport

Layout viewports are the baseline window for web layout. On a PC, the layout viewport equals the size of the current browser window; On mobile, the layout viewport is given a default value, which is usually much higher than the logical resolution of the device. This ensures that the PC’s web page can be rendered on the mobile browser, but the web elements are so small that users can manually zoom in to see the page.

The iPhone6, for example, has a layout viewport 980px wide.

By calling the document. The documentElement. ClientWidth/clientHeight viewport size for layout. When performing @media media queries, the width of the query is also the width of the layout viewport.

2. Visual Viewport

The visual viewport refers to the area that the user actually sees through the screen. The visual viewport defaults to the size of the current browser window (including the width of the scroll bar). You can do this by callingwindow.innerWidth/innerHeightTo get the visual viewport size.

When the user zooms the browser, the layout viewport size does not change, so the page layout remains the same, but zooming changes the size of the visual viewport. For example, if the user enlarges the browser window by 200%, the CSS pixels in the browser window will expand as the visual port enlarges, and one CSS pixel will span more physical pixels. So layout viewports limit your CSS layout and visual viewports determine exactly what the user sees.

3. Ideal Viewport

Layout viewports are not ideal for mobile display, so the ideal viewport was born: the ideal size for a website page to display on mobile. As shown above, a given pixel size on a page is the ideal viewport size, which is the logical resolution size, when the browser is debugging mobile.

Set the layout viewport with meta ViewPort

We can use the element’s ViewPort attribute to help us set viewports, zooming, and so on to make the mobile side look better.

The viewport can be configured with the following fields:

width	Set the layout viewport width to a positive integer, or the string “width-device”
initial-scale	Sets the initial zoom value of the page to a number, possibly with a decimal
minimum-scale	The minimum zoom value allowed to the user is a number, which can be a decimal
maximum-scale	The maximum zoom value allowed to the user is a number, which can be a decimal
height	Set the height of the layout viewport. This property is not important to us and is rarely used
user-scalable	Whether to allow users to zoom, value “no” or “yes”

Such as:

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

The meaning of the above statement is:

• width=device-widthIndicates that the layout viewport is set to the width of the device screen (logical resolution width);
• initial-scale=1The initial scale is 1, and the layout viewport size is set to the scaled size. The size of the zoom is based on the width of the screen, and so onwidth=device-widthSame effect. In addition, it is worth mentioning that when we do the media query, the width value of the query is actually the width value of the layout viewport.
• Maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = noIs intended to prevent the user from zooming; (note that in ios10+ and beyond, despite user-scalable=no, Safari allows scaling with gestures, and android’s built-in browsers are increasingly open to scaling, even with meta tags)

Length unit: REM and EM

• Rem refers to ‘The font size of The root element’, which is a relative unit based on The font size of The root element. Rem adaptation is based on HTML font size as the basic unit of layout.
• Em is another relative unit that is calculated relative to the font size value of the element itself.

Two, mobile terminal adaptation scheme

1. Media inquiries

Set different styles through the @media media query of the CSS. Through media query, we can set different styles according to different screens, so that we can achieve different screen adaptation. Link element in the CSS media query, different screens load different style files:

<link rel="stylesheet" media="(max-width: 500px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 980px)" href="pc.css" />
Copy the code

Media queries in CSS stylesheets:

@media only screen and (max-width: 414px) {html{
    font-size: 64px; }}@media only screen and (max-width: 375px) {html{
    font-size: 58px; }}@media only screen and (max-width: 360px) {html{
    font-size: 56px; }}@media only screen and (max-width: 320px) {html{
    font-size: 50px; }}Copy the code

2. Dynamic REM scheme (Taobao Flexible Scheme)

Above we introduced a relative length unit in CSS called REM, whose size is determined by the font size of the root element. We can set the size of an element in rem. For different screens, we just need to dynamically change the font size of the root element, and the element size will change proportionally, so that the page automatically fits. For example, suppose the design is 750px wide, element A is 300px wide, and on A 375pt screen with A root font size of 75px, element A is 4rem wide. On A 750pt screen, simply change the font size of the root element to 150px without changing the size of element A to fit the page. Mobile Mobile team flexible solution is based on the above principle, click here to view the DEMO. Its core code is as follows:

(function flexible (window.document) {
  var docEl = document.documentElement
  
 	// Set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow'.function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
}(window.document))
Copy the code

According to the above scheme, we need to convert px to REM in the design draft. If we need to calculate px to REM every time, it will be too troublesome. In order to simplify the process, many small tools for converting REM from PX have been derived. The most widely used is PostCSS-px2REM. Use this appliance, in the actual development of direct according to the design of px can be.

Example:

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
Copy the code

After using plug-in conversion:

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}
Copy the code

Rem text size is not recommended. We’ve all seen how REM can be used for H5 adaptation. How will the text be adapted? Is it also using REM to do automatic adaptation. Obviously, we expect to see the same text size underneath the Retina display on the iPhone3G and iPhone4. That said, we don’t want text to get smaller on Retina display, we want to see more text on larger phones, and most font files now come with some sort of dot matrix size, usually 16px and 24px, so we don’t want 13px and 15px. As a result, rem is not appropriate for paragraph text on H5 pages.

To summarize what you need to do with a dynamic REM scheme:

1. The meta tag sets the viewPort width to the screen width;
2. Change the font size of the root element according to the screen, usually set to 1/10 of the screen width (you can import the Lib-flexible library, or write your own logic).
3. The development environment is configured with PostCSS-px2REM or similar plug-ins;
4. According to the design style, the element width and height can be directly taken as the width and height of the design, the unit is PX, and the plug-in will convert it to REM.
5. Paragraph text is also written according to the design draft, the unit is PX, do not need to convert to REM;

3. Viewport Solution (recommended)

The essence of the dynamic REM scheme described above is to scale the page element size to match the screen width. CSS Viewport units are units of length relative to the width of the screen, and they are becoming more and more compatible. Viewport units: VW, VH, Vmin and vmax. Vw units represent the percentage of the width of the root element; 1vw is equal to 1% of the viewport width.

The following paragraph in the Lib-flexible document indicates that the flexible solution can be abandoned and vw viewport unit is recommended for adaptation.

Since viewPort units are compatible with many browsers, lib-flexible is a transition solution that can be abandoned, and there are problems with both current and previous versions. It is recommended that you start using viewPort instead.

Process of VW adaptation scheme:

1. The meta tag sets the viewPort width to the screen width;
2. The development environment is configured with postCSs-px-to-viewPort or similar plug-ins;
3. According to the writing style of the design draft, the element width and height can be directly taken as the width and height of the design draft, the unit is PX, and the plug-in will convert it to VW.
4. Paragraph text is also written according to the design draft, the unit is PX, do not need to convert to VW;

4, fixed Viewport width scheme (overall zoom)

The so-called fixed viewPort width, that is, the width of the web layout viewport is set to the width of the design draft, no matter what kind of device, the layout of the web page viewport width is fixed. In the development process, directly use the width and height of the design draft to set the element size and font size, the unit is PX.

For example, if the design is 750px wide, we could set the layout viewport as follows:

<meta name="viewport" content="width=750, user-scalable=no" />
Copy the code

In this scenario, the entire page is actually scaled. This is essentially a linear scaling of the page to fit different screen sizes. This scheme is acceptable for equipment in a certain size range. It’s simple and convenient, but it’s not a good idea if you want to create an interface that spans tablets and phones. Because the screen sizes of phones and tablets are so different, the zoom is too big and the interface elements don’t match. This scheme is suitable for some simple active pages, or page adaptation requirements are not high pages.

You can follow this link to see the effect. And you can see that this scheme scales all the elements of the page equally. On a phone, it might not make much of a difference, but on an iPad, it’s incongruous and the text is much larger.

Three, problem,

1. What is a pixel border problem on mobile? Why does it exist? How to solve it?

A: On mobile, since Apple introduced the Retina display, there has been a mismatch between device pixels and logical pixels on mobile. The iphone6, for example, has a physical pixel width of 750 and a logical pixel width of 375, meaning there are two physical pixels for each logical pixel. In mobile web development, we usually set the layout viewport width to the logical pixel width of the device, which is 375. The average design is 750, so a pixel in the design is 0.5 pixels in CSS, so 1px is a bit thick. If the above scheme 4 (fixed Viewport width) is used for page adaptation, there is no one pixel border problem.

The solutions are as follows:

• transform scale
• The background image
• box-shadow

reference

• zhuanlan.zhihu.com/p/30413803
• Responsive layout: Understand device pixels, device independent pixels, and CSS pixels
• Front-end mobile adaptation summary
• Use Flexible to achieve terminal adaptation of H5 page
• CSS3 REM sets the font size
• The difference between EM and REM in the CSS
• MDN: Use the ViewPort meta tag to control layout in mobile browsers
• Here’s what you need to know about mobile adaptation