移动端笔记

像素

1.物理像素

整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)

2.分辨率

每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率

3.物理像素

早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素

现在的手机大多都采用Retina技术或者更高的显示技术

手机A 分辨率：4*2（横向上两个像素点，纵向上4个像素点）

手机B 分辨率：8*4 （横向上4个像素点，纵向上8个像素点）

4. 逻辑像素

逻辑像素（logical pixel）也叫
CSS 像素
设备独立像素 (dpi：device independent pixel)

实际开发中使用的像素

.box{
    width: 2px;  /* 逻辑像素 */
    height: 2px; /* 逻辑像素 */
}

总结：

在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 2*2 个物理象时表示

在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用4*4个物理像素表示

整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍

如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）

css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

5.设备像素比

dpr：device pixel ratio

dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)

6.缩放

物理像素是不能改变大小的

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

7.放大

结论

原来，1个css像素=1个物理像素

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

所以，放大2倍后，1个css像素=2x2个物理像素

8.ppi

ppi，也称作 dpi(dots per inch)

PPI 的计算方法

视口

1.布局视口 layout viewport

布局视口的宽度一般为980，也有 1024 的

早期的网页都是为PC端设置的

PC端屏幕相较手机屏幕要宽

为了在手机上也能够显示这些为PC端专门设置的网页，出现了布局视口的概念

2.理想视口 ideal viewport

理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

需要设置 meta 标签进行设置

meta视口标签的主要目的：
布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

3.meta标签（理想视口的设定）

将自动生成的下面代码删除

4.缩放

页面在首次加载时，可以设置缩放比

5.用户缩放

可以通过下面的属性控制

user-scalable=no

完整写法

6.最终版

最标准的viewport设置

视口宽度和设备保持一致

视口的默认缩放比例1.0

不允许用户自行缩放

最完整版的 viewport