2019-8-13更新
所谓 viewport 就是规定了你网页的宽高,超过这个宽度就要换行;
每个手机有两种像素:设备物理像素(现在动不动都是上千的)、屏幕分辨率(一般都是固定的:320到 400 之间);
这两个像素的比率就是 DPR;
参考文献:
要点总结:
前提:以下所有的视口都以设备逻辑像素大小表示
-
设备逻辑像素(dip):其实就是设备分辨率中的单位大小,比如把电脑分辨率设为100×200,它的单位大小就是dip;把电脑分辨率设为300×400,它的单位大小就是dip;电脑本身实际大小是不变的,通过分辨率的改变,dip也随之改变。
-
布局视口(layout viewport):可以认为,就是你进行页面布局时用的“布”的大小
-
视觉视口(visual viewport):就是我们能看到的页面部分的大小
-
理想视口(ideal viewport):理想情况下,我们进行页面布局时用的“布”的大小和设备的尺寸一样就好了,那么,设备的尺寸就是理想的布局视口的大小了
-
设备的大小其实就是设备的屏幕分辨率,那么理想视口大小也就是和屏幕分辨率一样大了
-
移动设备的屏幕分辨率基本都是出厂设定好的,一般在320到400之间
-
注意:屏幕分辨率并不等同于设备的实际物理像素大小,比如同样是360×640分辨率的安卓手机和苹果手机,苹果手机显示的就比安卓手机清晰,因为苹果手机实际的物理像素点(用来发光与显示多种颜色的实体物件)要比安卓手机多
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width=device-width 就是将布局视口的宽度设置成和设备宽一样大
网友评论