移动端viewport基础知识

Posted 2022-03-16 mmxuehan

苹果6的基本信息：

屏幕尺寸：4.7英寸

分辨率：1334*750

视口大小：375*667

布局视口：980*1429

1、  屏幕尺寸：

屏幕尺寸并不是指屏幕的宽和高，是指屏幕对角线的长度，单位是英寸，屏幕尺寸可用来计算像素密度，像素密度就是指每一英寸能够显示的像素（和分辨率有关）的数量。

2、  分辨率：

是指设备显示的最小单元，和屏幕的制作工艺有关。1334*750（高*宽）是设备的物理像素。

像素密度的计算公式:√(1334²+750²)/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‘>