一 . Viewport的基础概念
1. 何为Viewport?
① 汉语意思为:视口,(电脑屏幕的)视点,视口;(宇宙飞船的)观察窗,观察孔;
② 在移动端中,viewport是用户网页的可视区域,也可称之为视区。最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口,不管网页原始的分辨率尺寸有多大,都能将其缩小显示在手机浏览器上,这样保证网页在手机上看起来更像在桌面浏览器中的样子。Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案;
③ 在pc端中,viewport实际上等于浏览器窗口,拥有浏览器窗口的宽度和高度,<html>元素使用viewport宽度的100%(在未手动设置html元素宽度情况下)。可以用document.documentElement.clientWidth
获取viewport的宽度。用document.documentElement.offsetWidth
获取<html>元素本身的尺寸。
2. 简单来说,Viewport是屏幕背后的一张画布,什么是viewport画布?
★ 浏览器会先把页面内容绘制到画布上,然后再通过屏幕窗口呈现出来。画布的宽度可大可小,当画布的宽度大于屏幕宽度时,画布上的内容就无法通过屏幕全部展示出来,用户可以通过屏幕手势来拖动画布查看被遮挡的部分。
3. 对于Viewport我们可以操作的属性:
width: viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height: viewport 的高度 (范围从223 到10,000)
initial-scale: 初始的缩放比例 (范围从>0 到10)
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放 (no,yes)
4. 画布缩放(scale):
① scale 是指画布以 device-width 大小为基准的缩放值;
② initial-scale=1.0 也就相当于设置了width=device-width;
③ 通常需要同时设置这两个值,这是因为两者在不同平台有兼
容性问题,因为在 iPhone 和 iPad 上,只支持 inital-scale=1 的设置 。
5. meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 解读:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=1.0:表示最小的缩放比例
maximum-scale=1.0:表示最大的缩放比例
user-scalable=no:表示用户是否可以调整缩放比例
二. 移动端尺寸的基础知识
1. 屏幕尺寸
① 屏幕尺寸指的是手机屏幕对角线的长度,单位是毫米(mm):
② 知道屏幕的宽度(width)和高度(height),通过勾股定理就可以算出对角线的长度( 对角线的长度换算成“英寸(inch)”,就是我们平时所说的手机尺寸 ):
③ 1英寸等于25.4mm,即 Inchs=对角线:25.4 :
2. 物理像素 (设备像素,device pixels)
① 像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多,同一范围内能看到的内容就越多。或者说,当设备尺寸相同时,像素越密集,画面就越精细、越清晰。
② 物理像素指的是设备屏幕的物理像素,任何设备的物理像素数量都是固定的。我们在手机屏幕上看到的画面,本质上都是由一个个发光的物理像素组成,物理像素是构成屏幕图像的最小单元,我们常说的屏幕分辨率,就是指这个屏幕上拥有多少个物理,通常,设计师给的 U 设计稿上的“px”指的就是物理像素。
3. 像素密度 – PPI
① PPI(Pixel Per Inch by diagonal):表示对角线上每英寸所拥有的像素个数。
② 计算PPI,可以先利用勾股定理计算出对角线上的像素数,然后再除以屏幕尺寸,即:
③ 把 iPhone 4 屏幕数据代入公式,即可得出 iPhone4 的 PPI :
④ PPI 的值越大,每英寸屏幕上的物理像素点就越多越密集,渲染出来的画面也更加细腻、清晰。
⑤ PPI导致的问题:相同尺寸的屏幕,像素点越多,每个物理像素点看起来就越小,从而导致渲染出来的图像就会越小,也就是说,设置相同大小的样式,屏幕的 PPI 越大,渲染出来的图像就越小。
示例问题如(左图明显比右图的观感舒服,字体大小更适中一些):
4. 缩放因子 – DPR
① 这里所谓的缩放因子,并不是对图像本身进行缩放,而是使用更多的物理像素来渲染同一个元素;
② 需要注意的是:DPR 的大小并不是通过固定公式计算出来的,而是厂商给屏幕设置的一个固定值,出厂时就确定了,它的大小不会随着程序的设置而改变。
5. DPR 和 PPI 的对应关系
DPR 和 PPI 呈正相关,但不成正比,我们无法通过特定的公式来计算它的值。
6. 逻辑像素、逻辑分辨率
① 对于同一个元素,DPR 越大,渲染时需要的物理像素就越多。平时我们在 css 中写的 px 指的就是逻辑像素,而不是物理像素,一个逻辑像素可以代表一个或多个物理像素。
② 一个逻辑像素所代表的物理像素个数与该屏幕的 DPR 成正比 ,即:
逻辑像素 = 物理像素 / DPR
③ 有了这个公式,我们就能推导出屏幕的逻辑分辨率,也就是屏幕的逻辑宽度和逻辑高度。即:
逻辑宽度 = 水平物理像素 / DPR
逻辑高度 = 垂直物理像素 / DPR
④ 通常,我们在 CSS 中设置的元素尺寸,本质上都是基于逻辑分辨率进行布局的。(也就是布局时预期所写即所得)