preface

A lot of people talk about mobile adaptation is confused state, all want to spit fragrance. Mobile terminal adaptation, direct px write dead, other adaptive not over? In fact, strict companies will require exactly the same scaling, which means the same number of words on every line on every phone. Next, we’ll talk about the past and present of mobile adaptation

1. Why mobile adaptation?

General design draft according to the size of the 375 designers, however, in what is now the era of mobile terminal (mobile phone) quick update, each brand of mobile phone has a different physical resolution, this will cause, the logic of each device resolution are also different, the design of the 357 draft, at this time if you want to restore the basic is impossible, Because if you have a left and right layout, if the left side is dead and the right side is adaptive, the right side of each device will display different sizes of content, which is especially important for mobile adaptation

Since we want to understand past lives, let’s start with a few concepts from the previous picture

Let’s go through them one by one

The screen size

Screen size is measured in inches by the diagonal length of the screen.

The length of the two diagonals as shown is the size of the screen

pixel

We see that 320×480 is called resolution, and this so-called resolution is basically 320 pixels across and 480 pixels across

What is a pixel?

Pixel (Pel, Pixel; Pictureelement, the smallest image element that makes up all the brightness and chroma of an image. The image of TV is composed of image points with different brightness arranged at a certain interval. The unit of image point formation is pixel, and the smallest unit of image composition is pixel. In terms of computer technology, a pixel is the smallest unit that hardware and software can control. It refers to the smallest unit on the screen, not the smallest unit on the picture. An image typically contains thousands of pixels, each with its own color information, packed tightly together. Because of the illusion of the human eye, these combined pixels are treated as one complete image. When you modify an area of an image, you are actually modifying the pixels within that area. How well or badly you modify these pixels will determine the quality of the final image. The more pixels per unit area, the better the image. A color TELEVISION image is made up of thousands of pixels, and each pixel is made up of red, green and blue colors side by side. Note that the size of each pixel is not fixed. It is determined by the resolution of the device.

What is resolution?

Screen resolution is the number of pixels, in pixels, vertically and horizontally. Screen resolution A setting that determines how much information is displayed on a computer screen, measured in horizontal and vertical pixels. For a screen of the same size, when the screen resolution is low (for example, 640 x 480), fewer pixels are displayed on the screen and individual pixels are larger. When the screen resolution is high (for example, 1600 x 1200), many pixels are displayed on the screen and each pixel is small.

I remember the resolution of the iPhone 6 on the Apple website is 750×1334, but the resolution of the iPhone 6 on the design draft is 375×667, and the resolution of each device is much smaller than the actual resolution, which is involved in some historical reasons

Device physical resolution (device pixels)

I believe that all of us front-end developers have witnessed the development process of mobile devices. From blue screen mobile phone, to color screen mobile phone, to touch screen mobile phone developed by Nokia, and then to smart phone step by step development, our hands are becoming clearer and bigger, so our screen is developing more and more rapidly.

We’ve gone from grainy screens to 720p to 1080p to the 2k screens of today’s flagship phones, and our physical resolution has grown ever larger. This exposes a problem, if we double the resolution of the phone, our image will be twice as small, we do not have to produce a design draft on each device, each device is not the same resolution, in fact, you worry about the problem, our Steve thought of many years ago. That’s our logical resolution

Logical resolution (device-independent pixels)

As you can see in the picture below, although the physical resolution of the devices is different, the logical resolution is almost the same, thanks to Steve

Steve jobs first introduced the Retina Display concept at the launch of the iPhone4. In the Retina Display used by the iPhone4, 2×2 pixels are used as one pixel, which makes the screen look more refined, but the size of the elements does not change. Since then, high-resolution devices, one more logical pixel. The differences between the logical pixels on these devices are not huge, but they are still a little different, which leads to the problem that mobile pages need to adapt. Since logical pixels are made from physical pixels, they have a pixel ratio

Device pixel ratio

Device Pixel Ratio (DPR) is the ratio of physical pixels to individual pixels on the device. Why do we need to know the device pixel ratio? Because this pixel ratio creates a very classic problem, the 1-pixel border problem.

1px border problem

When we write 1 px in CSS, because it is the logical pixels, to cause our logic pixels according to the equipment pixel ratio (DPR) to map to the device for the 2 p, or 3 px, because each device is not the same as the screen size, will lead to the size of each physical pixel rendering out is different also, remember the above points? The pixel size of the device is not fixed), so if on a larger device the 1px rendering looks rather thick, this is the classic one pixel border problem

How to solve

The idea is that in the Web, the browser provides us with window.devicePixelRatio to help us get DPR. In CSS, we can use media query min-device-Pixel-ratio to distinguish DPR: we calculate the corresponding size according to this pixel ratio, but it exposes a very big compatibility problem

Chrome has rounded 0.5px to 1px, While Firefox/Safari can draw half a pixel of edge, and Chrome will treat anything less than 0.5px as 0, while Firefox will treat anything less than 0.55px as 1px. Safari sees no less than 0.75px as 1px, and a closer look at iOS on the phone shows Chrome with a edge of 0.5px, while Android (5.0) native browsers don’t. So just setting 0.5px varies a lot from browser to browser, and we see that different browsers on different systems treat the px of the decimal point differently. So if we set the units to decimal px including width and height, it’s not very reliable, because different browsers behave differently.

As for other solutions to the one-pixel border problem, there are plenty of answers on the web, but HERE I recommend a solution that works very well and has no side effects

The transform: scale (0.5)

div {
    height:1px;
    background:# 000;- its - transform: scaleY (0.5); -webkit-transform-origin:0 0; overflow: hidden; }Copy the code

CSS based on device pixel ratio media query solution

/* @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {. Border -bottom::after {-webkit-transform: ScaleY (0.5); The transform: scaleY (0.5); }} /* @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {. Border -bottom::after {-webkit-transform: ScaleY (0.33); The transform: scaleY (0.33); }}Copy the code

In this way, the perfect solution to the problem of one pixel looking thick

How to fit

viewport

Viewports represent the currently visible area of computer graphics. In Web browser terms, this is usually the same as a browser window, but does not include the browser UI, menu bar, etc. — that part of the document you are browsing.

So how do you configure viewports on mobile? A simple meta tag!

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
Copy the code

What do they mean?

If we want to have a good visual effect and experience in the mobile port, then our viewport width must be infinitely close to the ideal viewport

Ideal viewport: In general, this viewport is not really there, it is the ideal layout viewport size for the device, the user does not have to manually zoom to display the page ideal. The ideal width is the width of the browser (screen).

So the meta setting above is our ideal setting, which specifies that our viewport is the width of the screen, and the initial zoom is 1, which means that our viewport is the ideal viewport at the beginning!

User-scalable set to No solved click delay on mobile devices (scalable)

Solution fit method

1. Rem adaptation

Rem is a new relative unit of CSS3, which has attracted wide attention. What’s the difference between this unit and EM? The difference is that when REM is used to set the font size for the element, the font size is still relative, but relative only to the HTML root element. This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer. Rem is now supported by all browsers except IE8 and earlier. For browsers that don’t support it, the solution is simply to write an additional declaration of absolute units. These browsers ignore the font size set with REM

Here’s an example:

// Suppose I set the size of the root element to 14px HTML {font-size: 14px} // then my bottom p tag will be 14 pixels p{font-size:1rem} if I want it to beCopy the code

Rem layout has to be flexible. Flexible solution is an early open source mobile terminal adaptation solution of Ali. After referring to flexible, we uniformly use REM layout on the page.

His principle is very simple

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();
Copy the code

Rem is calculated relative to the font size of the HTML node. So setting a font size for the root element at the beginning of the page, and placing the rest of the elements according to REM, ensures that the layout ADAPTS to changes in page size.

In this case, we only need to convert the px of the design to the corresponding REM units

Of course, this plan is only a transitional plan. Why is it a transitional plan

Since viewport was not compatible with earlier Versions of Android devices, and VW and VH were not compatible with all browsers, flexible solution used REM to simulate VMIN to achieve the “universal” solution of equal scale scaling on different devices. General scheme, because he is the scheme according to the size of exhibition space of equipment page size to judge the screen size, then according to the screen size to hundred reduction design draft, so as to let people see (show) is the same, the effect of this way, apple 5 and 6 p screen if you according to the design draft reduction, Font sizes are actually different, and people expect to see the same size at the same distance. Essentially, with a larger screen, users want to see more content, not bigger words.

So, this solution to the problem by scaling is a transitional solution, doomed to obsolescence

2. Vw and VH layout

Vh and VW schemes divide the visual viewport width window.innerWidth and visual viewport height window.innerHeight into 100 portions.

Vh and VW schemes are similar to REM, which are quite troublesome and require unit conversion. In addition, conversion from PX to VW may not be completely divisible, so there is a certain pixel difference.

But in today’s engineering world, when webpack parses CSS using postCSs-loader, there’s a postCSs-px-to-viewport that automatically converts PX to VW

{
    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport'({viewportWidth: 375, // viewportHeight: 1334, // viewportHeight (number) unitPrecision: 3, // set the reserved decimal number (number) viewportUnit:'vw', // Set the unit to convert (string) selectorBlackList: ['.ignore'.'.hairlines'], // minPixelValue: 1, // Set the minimum pixel value (number) to be replaced.false// Allow to convert px in media query (true/false)]}})Copy the code

3, Px based, vx and VXXX (VW/vH /vmax/vmin) supplemented, with some Flex (recommended)

Is recommended to use this solution, it is because we are going to consider the needs of users, users have to buy a domestic mobile phone, not to see a bigger word, but in order to see more content, so that direct use of px is the most sensible plan, use of vw, layout means such as rem understandable, however, flex the elastic layout is popular today, If you still think in this traditional way, there are obviously two reasons (PERSONALLY I think PX is the best, maybe there are big guys who can write elaborate layouts with VW, or REM, I don’t know) :

1, in order to be lazy, do not want to do every mobile phone

2. Unwilling to learn new layouts and letting flex and other advanced layouts pass you by

Mobile adaptation process

1. Set width=device-width viewport ‘in head

2. Use PX in the CSS

3. Use Flex layout in appropriate scenarios, or adapt with VW

4. Use media queries across device types (PC <-> mobile <-> tablet)

5. Consider developing separate projects if interactions are too different across device types

Write in the last

During the epidemic, I had the idea of job-hopping. When I asked about the layout of the mobile terminal, I could barely answer, but I always hesitated, as if I didn’t know much about it. Therefore, I made great wishes to comb the mobile terminal adaptation and help the laters to get on top!

Still hot: Flex In Depth – Solve mobile adaptation problems! Fresh out of the oven, thank you

Unexpectedly there is heat: take you to uncover the mystery of WebSocket! Do it again