移动端viewport基础知识

苹果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>

 

 

相关文章