Is the phone resolution the same as px on the web?

directory

1. Background

2. Knowledge analysis

3. Frequently Asked Questions

4. Solutions

5. Coding

6. Expand your thinking

7. References

8. More discussion

1. Background First, what is a viewport

In layman’s terms, a viewport on a mobile device is the area of the device’s screen that can be used to display our web pages

Viewport is not limited to the size of the browser’s viewport. It may be larger or smaller than the browser’s viewport.

A. Default ViewPort on mobile devices: In order to properly display traditional web sites designed for desktop browsers on mobile devices, browsers on mobile devices will set their default viewPort to 980px or 1024px (or any other value, depending on the device).

How to interpret PX in CSS, mobile device resolution and ‘pixel’ in UI?

In a desktop browser: 1px (read ‘CSS pixel’ below) represents 1 physical pixel, i.e. 1 CSS pixel = 1 physical pixel

When meta viewport is not tagged: mobile viewport width is 980px or 1024px, in which case 1css pixel is not a number of physical pixels (depending on resolution)

Write 20px text to see how it looks (see demo)

What about after you add the Meta ViewPort tag? We introduce another unit: density-independent pixel DP /dip

Dp/DIP is a unit of the same size displayed on different devices (see demo)

Simple understanding, in use

Then, all 1px = 1DP /dip

Add 20px text with meta tag (see demo)

Individual pixels of the device are available

dp

Mobile device resolution:

Speaking of mobile device resolution, here’s another unit dPI.

Dpi/PPI is a measure of the number of physical pixels dot per inch

At the beginning it was 160dpi/ppi

Later, due to the improvement of technology, in order to pursue the hd screen, there are 320dpi/ PPI screen and so on

Moving on to mobile device resolution

We can think of resolution as the number of physical pixels dot in length and width

But the device size is only that big, so for the same size device, the higher the resolution, the more physical pixels stack up, and the sharper the screen, the higher the DPI (see demo).

‘Pixels’ in the UI

The pixels in the UI image, the pixels that we measure in the PSD, for example the width of the PSD image in the task is 750px or 640px (see demo)

The pixels in the UI mouth are mobile device resolutions

What if the WIDTH of the UI image is 750px or 640px? 4. Solution irresponsible statement: Divide by 2 and write to CSS

More irresponsible statement: use JS dynamic control viewport, this time will not talk about, check yourself

5. Not enough coding demo? 1. How to use JS dynamic control viewPort

2. How to understand other vw and VH units

7. Further understanding of viewport for mobile front-end development

Deep parsing uses CSS units px, EM, REM, VH, VW, vmin, vmax for page layout

More discussion Thanks for watching

Today’s share is over here, welcome everyone to like, forward, leave a message, pat brick ~

Skill tree.IT Monastery

“We believe that everyone can become an engineer. From now on, find a senior to guide you to the entrance, control the pace of your own learning, and no longer feel confused on the way to learning.”

Here is the skill tree.IT Shuzhen Institute, where thousands of brothers find their own learning route, learning transparent, growth visible, brothers 1 to 1 free guidance.

Come with me learn ~ http://www.jnshu.com/login/1/21109035