手机像素视图部分知识

一. 像素相关问题

1.物理像素（像素点）
如果我们拿着放大镜看屏幕是这个样子的

可以看到：整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)
1.2分辨率
每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率。屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细。

1.3 1px=1个物理像素
如果使用物理像素表示 1px，结果就是手机B上显示的要比手机A上小
结论：不能使用物理像素表示元素尺寸。

1.4 逻辑像素
逻辑像素（logical pixel）也叫
CSS 像素
设备独立像素 (dpi：device independent pixel)
总结：
1.在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 22 个物理象时表示。
2.在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用44个物理像素表示。
3.整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍。
4.如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）。
5.css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与。

1.5 设备像素比
dpr：device pixel ratio
dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)
上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向

左边的 dpr=1，右边的dpr=2
所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制。
iphone 6 的 dpr就是2，iphone6+ 的 dpr=3

1.6 缩放
物理像素是不能改变大小的。
缩放其实就是改变1css 像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示。

1.61 放大
原来，1个css像素=1个物理像素。
放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点。
所以，放大2倍后，1个css像素=2x2个物理像素。

1.7 ppi
pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力。
ppi，也称作 dpi(dots per inch)。
如小米11的 ppi 为 515
屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数。
PPI 的计算方法

1.8 二倍图
对于一张50x50的图片在标清屏下打开，1css像素=1个物理像素。
如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊。
解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题。

核心思路：
比如希望在手机屏幕中显示一张100x100的图片
先制作一张200x200 的图片
通过css设置其逻辑尺寸为100x100
高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

2. 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。

2.1 布局视口
早期的网页都是为PC端设置的。
PC端屏幕相较手机屏幕要宽。
为了在手机上也能够显示这些为PC端专门设置的网页，出现了布局视口的概念。
布局视口的宽度一般为980，也有 1024 的。

2.2视觉视口
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

2.3理想视口
很明显，布局视口>视觉视口，所以会在视觉视口中出现横向滚动条
但，很明显，这种体验差爆了。
没有浏览器会这么做，而是，将网页内容进行缩放，缩放到在视觉视口中可以完全显示，造成的结果就是文字以及图片等变小，用户体验也是差爆了
理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定
需要设置 meta 标签进行设置
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口。