一、屏幕相关
1、屏幕尺寸
屏幕的对角线的长度,单位是英寸,常见的手机屏幕大小有: 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等。
2、屏幕分辨率
屏幕出厂后,屏幕水平和垂直方向的固定像素点数。
例如: IPhone 6 的屏幕分辨率为 750 * 1334。
显示分辨率指的是设备当前所用到的物理像素点数,屏幕分辨率 >= 显示分辨率。
3、屏幕密度
ppi/dpi 是指屏幕上每英寸里包含的物理像素点个数。
二、像素相关
1、物理像素
设备出厂后的每一个像素点,类似一个小灯泡,由屏幕制造商决定,屏幕生产后无法修改。
2、css像素
程序员写的,抽象长度单位,单位px,用来精确度量web页面上内容大小。
3、设备独立像素
设备出厂后的固定参数。
可以认为是计算机坐标中的一个点,由相关系统转化为物理像素。
有了高清屏后1个css像素和1个物理像素就不在是1:1的关系了。
引言: 在没出现【高清屏】的年代,1个css像素对应1个物理像素,但自从【高清屏】问世,二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率就会更高,显示效果就会更佳细腻。苹果将这种屏幕称为:Retina 屏幕(又名:视网膜屏幕),与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。
对比:iPhone3G/S 与 iPhone4的成像效果:
与物理像素关系
普通屏幕下 1 个设备独立像素 对应 1 个物理像素
高清屏幕下 1 个设备独立像素 对应 N 个物理像素
与css像素关系
在无缩放的情况下(标准情况):1css像素 = 1设备独立像素
4、像素比
单一方向上设备【物理像素】和【设备独立像素】的比例。
window.devicePixelRatio
型号 | 分辨率(物理像素点总和) | 设备独立像素(dip或dp) | 像素比(dpr) |
---|---|---|---|
IPhone 3GS | 320 * 480 | 320 * 480 | 1 |
IPhone 4 / 4s | 640 * 960 | 320 * 480 | 2 |
IPhone 5 / 5s | 640 * 1136 | 320 * 568 | 2 |
IPhone 6 / 7 / 8 | 750 * 1334 | 375 * 667 | 2 |
IPhone 6p / 7p / 8p | 1242 x 2208 | 414 * 736 | 3 |
IPhone X | 1125 * 2436 | 375 * 812 | 3 |
HUAWEI P10 | 1080 x 1920 | 360 x 640 | 3 |
5、像素之间的关系
在不考虑缩放的情况下(理想状态下):
普通屏(dpr = 1):1css像素 = 1设备独立像素 = 1物理像素
高清屏(dpr = 2):1css像素 = 1设备独立像素 = 2物理像素
高清屏(dpr = 3):1css像素 = 1设备独立像素 = 3物理像素
三、图片高清显示
位图:由像素组成,放大后会失真。
矢量图:有代码计算得来,不会失真。
位图放大失真原因:
一个位图被多个物理像素渲染。
解决办法:
1个位图像素对应1个物理像素。
// 借助媒体查询
#demo {
width: 200px;
height: 200px;
background-size: 100%;
background-image: url('./imgs/logo.png');
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#demo {
background-image: url('./imgs/logo@2x.png');
}
}
四、视口相关
1、pc端视口
document.documentElement.clientWidth
2、移动端视口
(1)布局视口
移动端布局视口默认都是980px,布局视口的宽度决定了盒子想要沾满屏幕应该写多宽。
(2)视觉视口
用户可见的区域,它的绝对宽度永远和设备屏幕一样宽。
//部分浏览器看不到,一般也不通过代码看
window.innerWidth
(3)理想视口
布局视口=设备宽度
移动端解决方案:开启理想视口、移动端单独设置一套页面
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
五、缩放
1、 PC 端
放大时
- 视口变小
- 元素的 css 像素值不变,但一个css像素所占面积变大了。
缩小时
- 视口变大
- 元素的 css 像素值不变,但一个css像素所占面积变小了。
2、 移动端
放大时
- 布局视口不变
- 视觉视口变小
缩小时
- 布局视口不变
- 视觉视口变大
注意:移动端缩放不会影响页面布局,因为缩放的时候,布局视口视口没有变化。