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.
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 12 | 390 x 844 | 1170 x 2532 |
iPhone 12 Mini | 360 x 780 | 1080 x 2340 |
iPhone 12 Pro | 390 x 844 | 1170 x 2532 |
iPhone 12 Pro Max | 428 x 926 | 1248 x 2778 |
iPhone SE | 214 x 379 | 640 x 1136 |
iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 |
iPhone 11 Xs Max | 414 x 896 | 1242 x 2688 |
iPhone 11 | 414 x 896 | 828 x 1792 |
iPhone 11 Xr | 414 x 896 | 828 x 1792 |
iPhone 11 Pro | 375 x 812 | 1125 x 2436 |
iPhone 11 X | 375 x 812 | 1125 x 2436 |
iPhone 11 Xs | 375 x 812 | 1125 x 2436 |
iPhone X | 375 x 812 | 1125 x 2436 |
iPhone 8 Plus | 414 x 736 | 1080 x 1920 |
iPhone 8 | 375 x 667 | 750 x 1334 |
iPhone 7 Plus | 414 x 736 | 1080 x 1920 |
iPhone 7 | 375 x 667 | 750 x 1334 |
iPhone 6s Plus | 414 x 736 | 1080 x 1920 |
iPhone 6s | 375 x 667 | 750 x 1334 |
iPhone 6 Plus | 414 x 736 | 1080 x 1920 |
iPhone 6 | 375 x 667 | 750 x 1334 |
iPad Pro | 1024 x 1366 | 2048 x 2732 |
iPad Third & Fourth Generation | 768 x 1024 | 1536 x 2048 |
iPad Air 1 & 2 | 768 x 1024 | 1536 x 2048 |
iPad Mini | 768 x 1024 | 768 x 1024 |
iPad Mini 2 & 3 | 768 x 1024 | 1536 x 2048 |
Nexus 6P | 411 x 731 | 1440 x 2560 |
Nexus 5X | 411 x 731 | 1080 x 1920 |
Google Pixel | 411 x 731 | 1080 x 1920 |
Google Pixel XL | 411 x 731 | 1440 x 2560 |
Google Pixel 2 | 411 x 731 | 1080 x 1920 |
Google Pixel 2 XL | 411 x 823 | 1440 x 2880 |
Samsung Galaxy Note 5 | 480 x 853 | 1440 x 2560 |
LG G5 | 360w x 640 | 1440 x 2560 |
LG G4 | 360w x 640 | 1440 x 2560 |
LG G3 | 360w x 640 | 1440 x 2560 |
One Plus 3 | 480 x 853 | 1080 x 1920 |
Samsung Galaxy S9 | 360 x 740 | 1440 x 2960 |
Samsung Galaxy S9+ | 360 x 740 | 1440 x 2960 |
Samsung Galaxy S8 | 360 x 740 | 1440 x 2960 |
Samsung Galaxy S8+ | 360 x 740 | 1440 x 2960 |
Samsung Galaxy S7 | 360 x 640 | 1440 x 2560 |
Samsung Galaxy S7 Edge | 360 x 640 | 1440 x 2560 |
Nexus 7 (2013) | 600 x 960 | 1200 x 1920 |
Nexus 9 | 768 x 1024 | 1536 x 2048 |
Samsung Galaxy Tab 10 | 800 x 1280 | 800 x 1280 |
Chromebook Pixel | 1280 x 850 | 2560 x 1700 |
https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html?lang=zh
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.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。