大家好，欢迎来到IT知识分享网。
一 . 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 中设置的元素尺寸，本质上都是基于逻辑分辨率进行布局的。（也就是布局时预期所写即所得）
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/138958.html
