Why can’t mobile be written like A PC website

First of all, let’s look at our normal computer website, on the mobile phone will be how \

What’s trending today: news.2345.com/shouye/?dh

Disadvantages:

1. The screen is small and the characters are too small, which makes it very inconvenient to look at. The screen is small and the content layout is very crowded

Moreover, when we select the element, we will be surprised to find that the element looks very small, but the width and height are quite large, especially compared with the mobile site, we will find that a very strange thing

Here,70 * 78Looks like it’s better than110 * 26So much bigger! What’s going on ？？？？ Let’s check it out live

Want to know? So let’s learn a little bit about units first

So let’s figure out the units

inches

We use inches to describe the physical size of a device, for example, 17 inches by 13 inches for a computer, 6.5 inches by 4 inches for a mobile phone

Note: The dimensions above are the diagonal length of the screen. For example, when we say that a mobile phone has a 6.5-inch screen, we are actually referring to the diagonal distance

1 inch = 2.54 cm

The resolution of the

– Screen resolution

The specific number of pixels on the screen is not high resolution, which means the screen is clear. This also needs to consider the size problem. – pixel \

  • Square square, each pixel has a color and a specific position. \
  • Images, computer screens, things like that are made up of pixels, so when we change the resolution, the screen changes.

Take pictures for example:

The one on the left uses1000 * 500Pixel production, use the one on the right10000 * 5000From a visual perspective, we can see that the picture on the right is clearer because it uses more pixels to deal with colors. \

– Pixel is not an absolute unit unlike the centimeter or millimeter we use, a pixel is not an absolute unit

Let’s make an assumption:

The one on the left is a low resolution phone 320 * 480

The high resolution phone on the right is 640 x 960

The size of the two pixels on the right = the size of the one pixel on the left

And since everyone has the same pixels, it’s going to look smaller here, on a high-resolution screen.

That’s why an element of the same size, rightPCThere is a difference between the display on the bottom and the display on the mobile end, because the pixels on the bottom are smaller than those on the mobile endpcThe pixels below are smaller

Why is 70 * 78 bigger than 110 * 26 on both mobile devices?

Let’s start with Steve Jobs

Retinal screen

First of all, our mobile phone screen size is very large, but even though the size is very large, we will find an amazing thing, is that the display appears to be similar

For example, we can see that although the size of the phone is obviously changed, the page display, it looks exactly the same. Isn’t it true that each resolution is different in size and size?

Science:

We have Steve Jobs to thank for that.

At the launch of the iphone4, Steve jobs introduced the concept of a retina screen for the first time

Here’s a picture: Retina screens

Low resolution phone1Size = high resolution cell phone2 * 2The size of the

So the screen is more refined, and it doesn’t look like it’s going to change size, like this

The one on the left uses 300 physical pixels, the one on the right uses 600 physical pixels, but… We can’t have one pixel per phone, can we? How many blueprints would that take? How many styles do YOU write? So we have to use the same unit to tell devices of different resolutions what the pixel size should be on the screen, and that unit is device-independent pixels

Device independent pixel

Each device has its own individual pixels, and as you can see from the browser emulator, each device has its own individual pixels. So what’s the relationship between device independent pixels and what we call physical pixels? – Device pixel ratio Pixel ratio: the ratio of physical pixels to device independent pixels. This ratio, . We can get the window using js devicePixelRatio | iphone6 | | | — — — — — — — — — — – | — — — — — — — — — – | | | physical pixel 750 * 1334 | | pixels than | 2 | | 375 * 667 | | \ device independent pixel

Have equipment, of course, exceptions: | iPhone6 plus | | | : — — — — — — — — — — – | — — — — — — — — — — – | | | physical pixel 1080 * 1920 | | pixels than | 3 | | equipment | 414 * 736 pixels independently

Pixel ratio = physical pixels/device-independent pixels?

(414 * 736) * 3 = 1242 * 2208

1080 * 1920 as agreed? What about the extra? Rest assured, the mobile phone will automatically put 1242 * 2208 device independent pixels, inserted into 1080 * 1920 physical pixels we can also see iphone6 is fit our pixel ratio requirements, so generally we get the mobile phone design, is 750*1334 \

Android don’t try the device, the size is too much, not necessarily in strict accordance with the resolution.

Web development

After reading so much about size, we still don’t know what to do. What does device size have to do with CSS? Or, how can we set up CSS to be device-independent? The first thing we need to know is, The wide high how we see the original | — — — — — — — — — — — – | — — — — — — — — – | | | div elements 300 * 300 | | iphone6 | 128 * 128 | | layout viewport | 980 | | equipment | 375 independent pixel 375/980 * 300 * 667 | = 114 according to the above formula, we found that our viewport Settings for as long as the layout and equipment independent pixel is consistent, our CSS independent pixels pixel is equal to the equipment

Viewport concept

Viewport can be subdivided into three kinds: layout viewport, visual viewport, ideal viewport, that is, what are they? Layout viewport: is the base window of web layout, here only consider layout, that is, there will be no non-layout content, such as scroll bar, such as menu bar. On mobile, the layout viewport has a default value of 980px, which ensures that PC websites can be displayed (albeit ugly) on the phone. In the js can through the document. The documentElement. ClientWidth viewport size for layout

  • Visual viewport

Visual viewport: The real area that the user sees visually, including the scroll bar.

You can use window.innerWidth in JS

– Ideal viewport



This is what we call device-independent pixels, but when the layout viewports match the viewports, the result is the same.



In jswindow.screen.widthAccess to

Matters needing attention:



1. The maximum zoom value for ios10 and ios10+ is invalid

1. Initial = width

1. Initial is consistent with the minimum value

1. Some Android models do not accept operations like width = specific value



Normally, we would set the initial, minimum, and maximum values to 1 and not allow the user to zoom in and out of the page. But since maximum is invalid, we’ll disable scaling via JS later



Viewport Settings:

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

Fit according to pixel ratio

This way, you write physical pixels directly, Or in the case of iphone6 | iphone6 | | | — — — — — — — — — — — – | — — — — — — — — — – | | | physical pixel 750 * 1334 | | pixels than | 2 | | equipment | 375 * 667 | independent pixel layout viewport = Physical pixels

<script>
    var meta = document.createElement('meta');
    var scale = 1 / window.devicePixelRatio;
    meta.name = "viewport";
    meta.content="initial-scale="+ scale +",minimum-scale="+ scale+",maximum-scale="+ scale+",user-scalable=no";
    document.head.appendChild(meta);
</script>
Copy the code

The same element in414 * 736It’s half the width of the screen, but in320 * 480The screen is more than half full. What’s the problem? So in this case, we need to adapt the screen:



In other words, it’s one element, small phone, I show small dot, big phone, I show big dot



In order to do this, we need to learn the following contentRem adaptation

What is REM? Don’t you think it looks a lot like EM?

Review the em

Font size: 1em = 1 font size: 1em = 1

css <style> body{ font-size: 20px; } div{ font-size: 15px; width: 5em; height: 5em; background: rebeccapurple; } </style>

width = 15 * 5 = 75px;

Disadvantages: Font size is often changed, em is calculated based on its own font size, easy to change the width and height.

And with that in mind, we’re going to learn a new unit called REM

Rem -> root em

css <style> html{ font-size: 20px; } div{ font-size: 15px; width: 5em; height: 5em; background: rebeccapurple; } </style>

width = 20* 5 = 100px;

But it seems that ~ doesn’t change the problem we mentioned above….. Don’t worry! That’s because you haven’t changed the font size yet

Use js to dynamically set font size

In that case, all you care about is how much REM you write

Simple understanding – friends are welcome to suggest discussion