苹果6的基本信息:
屏幕尺寸:4.7英寸
分辨率:1334*750
视口大小:375*667
布局视口:980*1429
1、 屏幕尺寸:
屏幕尺寸并不是指屏幕的宽和高,是指屏幕对角线的长度,单位是英寸,屏幕尺寸可用来计算像素密度,像素密度就是指每一英寸能够显示的像素(和分辨率有关)的数量。
2、 分辨率:
是指设备显示的最小单元,和屏幕的制作工艺有关。1334*750(高*宽)是设备的物理像素。
像素密度的计算公式:√(13342+7502)/4.7(勾股定理)。
3、 视口大小:
可以叫做理想视口大小,每款设备都不一样,并且是固定的,不可以更改。理想视口大小是以设备的独立像素为单位。设备的独立像素是一种虚拟的单位,默认是不起作用的。设备的独立像素和分辨率(物理像素)可以用来计算像素比(固定值)。
像素比的计算公式:物理像素/设备的独立了像素 --> 750/375=2
代码获取: window.devicePixelRatio
4、 布局视口:
以上都是不可以改变的,布局视口我们可以改变,也是我们最关心的。以前网页都是pc端的,尺寸都比较大,移动端为了放得下整个页面,就让浏览器有一个很大的布局视口(通常为980px)。单位是pc端中的css像素,浏览器厂商会把css像素计算转化为屏幕上的物理像素,这点我们不用关心。我们可以重置布局视口的大小,把布局视口的大小改变为理想视口的大小,屏幕的单位像素css像素就和设备的独立像素一样大小了,设备的独立像素就可以使用了。
<meta name=‘viewport‘ content=‘width=device-width,initial-scale=1.0‘>