屏幕、像素、视口

---

移动端的特点

1. 小屏幕
2. 通过触摸交互
3. 屏幕尺寸繁多

---

一、屏幕

• 屏幕尺寸： 屏幕尺寸通常是指屏幕对角线的长度，单位一般为英寸。常见屏幕尺寸的查看网址：https://screensiz.es/
• 屏幕分辨率：屏幕分辨率指的是屏幕上的物理像素点的个数。一般用 x * y 或者 y * x 表示。

注意：

1. 屏幕分辨率时固定值，由屏幕的生产厂商决定。
2. 屏幕分辨率不是显示分辨率，计算机可以修改显示分辨率但不能修改屏幕分辨率。
3. 1080P 的分辨率是1920x1080 720P 屏幕的分辨率是 1280 * 720
4. 2K 屏幕是指单一方向上分辨率具有约 2000 像素的显示设备。最标准的 2K 分辨率为 2048×1024
5. 几款常见屏幕的分辨率：

二、像素

1. 相关概念

• 设备像素 / 物理像素
  （1）设备像素也叫物理像素，是一个长度单位，一个设备像素对应设备中的一个微小的物理部件，如：晶体管。
  （2）设备像素是手机屏幕参数，由手机屏幕的生产厂商决定。例如 IPhone 6 的物理像素为 750 * 1334

• 设备独立像素 / 设备无关像素
  （1）设备独立像素也叫设备无关像素，简称DIP，也是一个长度单位。设备独立像素可以认为是在计算机系统中可以通过程序控制使用的虚拟像素。
  （2）设备独立像素也是手机屏幕的一个参数，由手机制造商决定。例如IPhone 6 的设备独立像素为 375 * 667

• 注意：设备独立像素与物理像素的区别
  （1）普通屏幕下，1 设备独立像素= 1 个设备物理像素；高清屏幕下，1 设备独立像素= N 个设备物理像素。
  （2）设备独立像素的出现，使得即使在高分辨率（高清屏）的屏幕下，也可以正常尺寸的显示元素，使代码不受到设备的影响。如果没有设备独立像素，在即高分辨率屏幕下的元素会显得非常小。
  （3） 常见屏幕像素的查看网址：https://uiiiuiii.com/screen/
  （4） Retina 屏幕，Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
  （5） 我们在CSS中设置的样式都是操作设备独立像素。

• CSS像素 / 逻辑像素
  （1）CSS 像素是在 CSS 语言中用来表示长度的一个单位，单位为 px。
  （2）注意，CSS像素不能直接跟显示中的长度单位进行换算，一般只用于在CSS和JS中表示元素的逻辑大小。

• 位图像素
  （1）位图像素指的是，在位图中组成位图的单个的像素点，也是长度单位。位图像素是栅格图像（如：.ipeg .gif .png 等）的最小数据单元。
  （2）位图和矢量图，位图图像亦称为点阵图像或栅格图像，是由单个的像素点组成的。放大后会失真。矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。放大后不会失真（如：svg图片）。用于制作矢量图的软件有Adobe Illustrator，Sketch

2. 像素之间的关系

• 页面不缩放的情况下，CSS 像素 == 设备独立像素DIP == 设备物理像素 == 屏幕分辨率== 位图像素
• 在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个物理像素，高清屏幕下一个 CSS 像素 对应 N 个物理像素。

3. 像素密度

像素密度是指，屏幕上每英寸可以显示的像素点的数量（物理像素 / 屏幕尺寸），单位是 ppi （pixels per inch ），这里还有另一个单位 dpi（dots per inch），两个值的计算方式都一样，只是使用的场景不同。 PPI 主要用来衡量屏幕，DPI 用来衡量打印机，鼠标等设备。

苹果曾经给出个一个标准：手机屏幕达到 300PPI、平板屏幕达到 220PPI、笔记本电脑屏幕达到 200PPI 即可认为是 Retina 屏幕。

4. 像素比

（1）像素比简称DPR，是指单一方向上设备独立像素与物理像素的比值（设备独立像素 / 物理像素），屏幕的像素比为 N，就称这个屏幕为 N倍屏。
（2）一般情况下，单屏幕无法显示0.5px，但2倍屏或其他 N倍屏可以。

（3）获取设备屏幕的像素比，代码：

window.devicePixelRatio

（4）屏幕属性：-webkit-min-device-pixel-ratio-，表示屏幕的像素比，如：

@media screen and(-webkit-min-device-pixcel-ratio-:2){
	/* 表示在屏幕像素比为 2 的屏幕下 */
}

（5）像素比的作用，程序可以通过像素比来控制显示的图片，以达到在不同屏幕下都可以清晰显示。

---

三、视口

1. PC端

在 PC 端，视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。

//获取浏览器的可视区域宽度，不含滚动条
console.log(document.documentElement.clientWidth);
//获取浏览器窗口宽度，包含滚动条
console.log(window.innerWidth);
//获取浏览器的总宽，包含窗口外部的阴影
console.log(window.outerWidth);
//获取屏幕总宽
console.log(screen.width);

2. 移动端

移动端与PC端不同，由三个视口：布局视口、视觉视口、理想视口。

• 布局视口
  （1）概念：布局视口是指用来放置网页内容的区域。
  （2）一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面（非移动端网页）在手机上显示的问题。 布局视口大小由浏览器开发厂商决定，大多数设备的布局视口大小为 980px。
  （3）获取方式：

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

• 视觉视口
  （1）概念：视觉视口就是用户可见的区域，即浏览器窗口。
  （2）获取方式：

console.log(window.innerWidth);
console.log(window.innerHeight);

• 理想视口
  （1）概念：布局视口宽度与设备同宽时称之为理想视口，也叫完美视口。如iPhone 6 的完美视口宽度为375px。
  （2）注意：理想视口并不是真实存在的视口，只是一个概念。用于表示与设备同宽的布局视口。即

document.documentElement.clientWidth == device-width;

（3）理想视口的好处：用户不需要缩放页面和横向的滚动条就能看到网站的全部内容。针对移动端的设计稿更容易开发。
（4）设置为理想视口：

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

3. 页面缩放

• PC端
  放大时：布局视口变小，视觉视口变小，元素像素大小不变；
  缩小时：布局视口变大，视觉视口变大，元素像素大小不变。
• 移动端
  放大时：布局视口不变，视觉视口变小，元素像素大小不变；
  缩小时：布局视口不变，视觉视口变大，元素像素大小不变。
• 总结：PC端缩放会影响页面布局，移动端缩放不会影响页面布局。
• 注意：980px 是手机浏览器厂商为页面设置的布局视口的初始宽度。

4. viewport 视口控制

viewport 标签是苹果公司在 2007 年引进的，用于移动端布局视口的控制。
使用示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no,maximum-scale=1.0, minimum-scale=1.0">

• viewport 的相关属性：
  （1）width：表示布局视口的宽度，width 值可以是数字，也可以是设备宽度device-width，这样可以得到完美视口
  （2）initial-scale：初始化缩放比例，initial-scale = 屏幕独立像素宽度 / 布局视口宽度。 完美视口下 initial-scale = 1.0 。注意：
  chrome 测试该参数会有偏差，真机测试；
  initial-scale = 1.0 也可以得到完美视口；
  initial-scale 会影响布局视口和视觉视口的大小；
  width 与 initial-scale 同时设置时，会选择尺寸较大的那个。
  （3）minimum-scale： 设置允许用户最小缩放比例，minimum-scale = 屏幕独立像素宽度 / 视觉视口宽度 //iphone 6 为 0.5
  （4）maximum-scale： 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性，maximum-scale = 屏幕独立像素宽度 / 视觉视口宽度 //iPhone 6 为 2
  （5）user-scalable： 设置是否允许用户缩放，是否允许用户通过手指缩放页面。苹果浏览器 safari 不认识该属性。
  （6）viewport-fit： 设置为 cover 可以解决『刘海屏』的留白问题， auto/contain/cover

（完）