3

Device pixels and CSS pixels

device pixels (device pixels) is also called device physical pixel is a specific measurable physical unit.

CSS pixels are device-independent pixels. This type of pixel is also called (Device-independent pixel), which is the abstract unit of the application. When the application is running, the system will follow the underlying graphics certain proportion (physical device independent pixels and a pixel ratio device) converts the pixel abstract application for devices for physical pixels.

device physical pixel and device independent pixel ratio, \( dp \) device physical pixel, \( dips \) device independent pixel.

$$ dpr = \frac{dp}{dips} $$

px in the CSS layout is a unit relative to the physical pixel. In most browsers, the ratio of the physical pixel to it can be obtained window.devicePixelRatio For example, on the iPhone6, the resolution is 750x1334, its window.devicePixelRatio=2 so its screen width is 375px, with a total of 750 physical pixels, that is, 1px represents two physical pixels.

The following is the compatibility window.devicePixelRatio

兼容性

Viewport

viewport and <html> in the browser have the same area and can be regarded as the inclusion block of the upper layer of <html> In most mobile devices, the browser is full screen, so the viewport is the size of the entire screen.

viepwport

Viewports often need to distinguish layout viewport (layout viewport), visual viewport (visual viewport) and ideal viewport (ideal viewport)

layout viewport can be regarded as the canvas for CSS layout, visual viewport is the page area currently displayed, ideal viewport is the best presentation of the page on the device.

布局视口-视觉视口

The ideal presentation method is the ultimate goal, which can greatly improve the user experience, especially on non-PC devices. The ideal state means:

  • Layout viewport width = visual viewport width = device width.

If layout viewport width ≠ visual viewport width , the situation is that the content is too wide, and the user may need to zoom to view the content. After zooming out, it looks laborious. After zooming in, you need to slide left and right to view.

Mobile devices

The biggest difference between mobile browsers and desktop browsers is that the screen width is much smaller. For many web pages designed for PCs, the display will be messy due to the narrower width.

Because mobile device browsers believe that they must be able to display all websites normally, including many PC-side websites, all mobile browser manufacturers uniformly set the device’s default layout viewport to 980px.

兼容性

For example, on an iphone6 with a width of 375px, a page with a width of 980px is displayed. Most browsers shrink the page in order to display the full page.

默认

We can use meta viewport make the browser layout view area equal to the screen width, which is 375px, so the display is the ideal effect.

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

理想

The following meta is the most commonly used website we are developing for mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

The meta tag is to make layout viewport equal to the width of the device, while not allowing the user to manually zoom.

meta viewport tag was first introduced by Apple in its safari browser to solve the viewport problem of mobile devices. Later, Android and major browser manufacturers followed suit and introduced meta viewport . The facts also proved that this thing is still very useful.

Here are the resolutions and viewport sizes of some devices:

equipment Viewport size (width x height) Device resolution (width x height)
iPhone 12390 x 8441170 x 2532
iPhone 12 Mini360 x 7801080 x 2340
iPhone 12 Pro390 x 8441170 x 2532
iPhone 12 Pro Max428 x 9261248 x 2778
iPhone SE214 x 379640 x 1136
iPhone 11 Pro Max414 x 8961242 x 2688
iPhone 11 Xs Max414 x 8961242 x 2688
iPhone 11414 x 896828 x 1792
iPhone 11 Xr414 x 896828 x 1792
iPhone 11 Pro375 x 8121125 x 2436
iPhone 11 X375 x 8121125 x 2436
iPhone 11 Xs375 x 8121125 x 2436
iPhone X375 x 8121125 x 2436
iPhone 8 Plus414 x 7361080 x 1920
iPhone 8375 x 667750 x 1334
iPhone 7 Plus414 x 7361080 x 1920
iPhone 7375 x 667750 x 1334
iPhone 6s Plus414 x 7361080 x 1920
iPhone 6s375 x 667750 x 1334
iPhone 6 Plus414 x 7361080 x 1920
iPhone 6375 x 667750 x 1334
iPad Pro1024 x 13662048 x 2732
iPad Third & Fourth Generation768 x 10241536 x 2048
iPad Air 1 & 2768 x 10241536 x 2048
iPad Mini768 x 1024768 x 1024
iPad Mini 2 & 3768 x 10241536 x 2048
Nexus 6P411 x 7311440 x 2560
Nexus 5X411 x 7311080 x 1920
Google Pixel411 x 7311080 x 1920
Google Pixel XL411 x 7311440 x 2560
Google Pixel 2411 x 7311080 x 1920
Google Pixel 2 XL411 x 8231440 x 2880
Samsung Galaxy Note 5480 x 8531440 x 2560
LG G5360w x 6401440 x 2560
LG G4360w x 6401440 x 2560
LG G3360w x 6401440 x 2560
One Plus 3480 x 8531080 x 1920
Samsung Galaxy S9360 x 7401440 x 2960
Samsung Galaxy S9+360 x 7401440 x 2960
Samsung Galaxy S8360 x 7401440 x 2960
Samsung Galaxy S8+360 x 7401440 x 2960
Samsung Galaxy S7360 x 6401440 x 2560
Samsung Galaxy S7 Edge360 x 6401440 x 2560
Nexus 7 (2013)600 x 9601200 x 1920
Nexus 9768 x 10241536 x 2048
Samsung Galaxy Tab 10800 x 1280800 x 1280
Chromebook Pixel1280 x 8502560 x 1700

https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html?lang=zh

https://viewportsizes.com

Some length and width attributes

screen

  • screen.width : Returns the screen width.
  • screen.height : Returns the height of the screen.
  • screen.availWidth : Returns the available width of the screen. That is, the screen width minus the width of the left and right taskbars can be expressed as the width when the software is maximized.
  • screen.availHeight : Returns the available height of the screen. That is, the height of the screen minus the height of the upper and lower taskbars can be expressed as the height when the software is maximized.

window

  • window.outerWidth : Returns the width of the browser.
  • window.outerHeight : Returns the height of the browser.
  • window.innerWidth : The available width of the page in the browser, including the width of the vertical scroll bar.
  • window.innerHeight : The available height of the page in the browser, including the height of the horizontal scroll bar.
  • window.pageXOffset : The horizontal scroll offset of the page in the browser.
  • window.pageYOffset : The vertical scroll offset of the page in the browser.

body

  • document.body.offsetWidth : The total width of the body.
  • document.body.offsetHeight : The total height of the body.
  • document.body.clientWidth : The width of the body display; it represents the width of the area displayed by the body in the browser.
  • document.body.clientHeight : The height of the body display; it represents the height of the area displayed in the browser.

window


编程码农
455 声望1.4k 粉丝

多年编程老菜鸟👨‍💻🦍