共计 3282 个字符，预计需要花费 9 分钟才能阅读完成。
设施像素和 CSS 像素
设施像素 （device pixels）也叫做 设施物理像素 是一个具体可测量的物理单位。
CSS 像素是与设施无关的像素，这一类像素也叫做 独立设施像素 （Device-independent pixel），它们是应用程序的形象单位。当利用程序运行时，底层图形系统会依照 肯定的比例（设施物理像素和设施独立像素比）将应用程序的形象像素转换为实用于设施的物理像素。
设施物理像素 和设施独立像素 的比例，\(dp \) 设施物理像素，\(dips \) 设施独立像素。
$$
dpr = \frac{dp}{dips}
$$
将 CSS 布局中的 px 是绝对于物理像素的单位，在大多数浏览器中，通过 window.devicePixelRatio 能够失去物理像素与它的比率。比方在 iPhone6 上分辨率 750×1334，它的window.devicePixelRatio=2 所以它屏幕宽度为 375px，共有 750 个物理像素，即 1px 代表两个物理像素。
上面是 window.devicePixelRatio 浏览器的兼容性。
视口(Viewport)
浏览器中的 viewport 和 <html> 区域雷同，能够看作是 <html> 下层的蕴含块。在大多数挪动设施中，浏览器是全屏的，所以 viewport 是整个屏幕的大小。
视口中常常须要辨别 布局视口（layout viewport），视觉视口（visual viewport）和现实视口（ideal viewport）
布局视口 能够看作是 CSS 布局时的画布，视觉视口 是以后显示的页面区域，现实视口 是页面在设施最佳的出现。
现实的出现形式是终极目标，能够使用户体验大大晋升，特地是在非 PC 设施上，现实的状态意味着：
- 布局视口宽度 = 视觉视口宽度 = 设施宽度。
如果 布局视口宽度 ≠ 视觉视口宽度，呈现的状况就是内容过宽，用户可能就须要缩放来查看内容，放大后，看起来吃力，放大后须要左右滑动查看。
挪动设施
挪动浏览器和桌面浏览器最大的区别是屏幕宽度小很多，对于很多针对 PC 设计的网页会因为宽度变窄而显示错乱。
因为挪动设施浏览器认为本人必须能让所有的网站都失常显示，这包含了很多 PC 端网站，所以各挪动浏览器厂商对立将设施默认 布局视口 设置为 980px。
比方在宽 375px 的 iphone6 上显示一个宽为 980px 的页面，大多数浏览器为了让页面显示全而放大页面。
咱们能够应用 meta viewport 让浏览器 布局视区 等于屏幕宽度也就是 375px，这样显示进去就是现实成果。
<meta name="viewport" content="width=device-width"/>
上面这个 meta 是咱们在开发挪动设施的网站最罕用的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">该 meta 标签的作用是让以后 布局视口 的宽度等于设施的宽度，同时不容许用户手动缩放。
meta viewport 标签首先是由苹果公司在其 safari 浏览器中引入的，目标就是解决挪动设施的 viewport 问题。起初安卓以及各大浏览器厂商也都纷纷效仿，引入对 meta viewport 的反对，事实也证实这个货色还是十分有用的。
上面是一些设施的分辨率和视口大小：
| 设施 | 视口大小（宽 x 高） | 设施分辨率（宽 x 高） |
|---|---|---|
| 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.adob…
https://viewportsizes.com
一些长宽属性
screen
screen.width：返回屏幕宽度。screen.height：返回屏幕高度。screen.availWidth：返回屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可示意为软件最大化时的宽度。screen.availHeight：返回屏幕可用高度。即屏幕高度减去高低任务栏后的高度，可示意为软件最大化时的高度。
window
window.outerWidth：返回浏览器宽度。window.outerHeight：返回浏览器高度。window.innerWidth：浏览器内页面可用宽度，蕴含了垂直滚动条的宽度。window.innerHeight：浏览器内页面可用高度，蕴含程度滚动条的高度。window.pageXOffset：浏览器内页面的程度滚动偏移量。window.pageYOffset：浏览器内页面的垂直滚动偏移量。
body
document.body.offsetWidth：body 总宽度。document.body.offsetHeight：body 总高度。document.body.clientWidth：body 展现的宽度；示意 body 在浏览器内显示的区域宽度。document.body.clientHeight：body 展现的高度；示意 body 在浏览器内显示的区域高度。
