【移动端开发】移动端开发基础问题

一、屏幕相关

1、屏幕尺寸

屏幕的对角线的长度，单位是英寸，常见的手机屏幕大小有： 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等。

2、屏幕分辨率

屏幕出厂后，屏幕水平和垂直方向的固定像素点数。
例如： IPhone 6 的屏幕分辨率为 750 * 1334。
显示分辨率指的是设备当前所用到的物理像素点数，屏幕分辨率 >= 显示分辨率。

3、屏幕密度

ppi/dpi 是指屏幕上每英寸里包含的物理像素点个数。

二、像素相关

1、物理像素

设备出厂后的每一个像素点，类似一个小灯泡，由屏幕制造商决定，屏幕生产后无法修改。

2、css像素

程序员写的，抽象长度单位，单位px，用来精确度量web页面上内容大小。

3、设备独立像素

设备出厂后的固定参数。
可以认为是计算机坐标中的一个点，由相关系统转化为物理像素。
有了高清屏后1个css像素和1个物理像素就不在是1:1的关系了。

引言： 在没出现【高清屏】的年代，1个css像素对应1个物理像素，但自从【高清屏】问世，二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准：在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率就会更高，显示效果就会更佳细腻。苹果将这种屏幕称为：Retina 屏幕（又名：视网膜屏幕），与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。

对比：iPhone3G/S 与 iPhone4的成像效果：

与物理像素关系
普通屏幕下 1 个设备独立像素 对应 1 个物理像素
高清屏幕下 1 个设备独立像素 对应 N 个物理像素

与css像素关系
在无缩放的情况下（标准情况）：1css像素 = 1设备独立像素

4、像素比

单一方向上设备【物理像素】和【设备独立像素】的比例。

window.devicePixelRatio

型号	分辨率（物理像素点总和）	设备独立像素(dip或dp)	像素比(dpr)
IPhone 3GS	320 * 480	320 * 480	1
IPhone 4 / 4s	640 * 960	320 * 480	2
IPhone 5 / 5s	640 * 1136	320 * 568	2
IPhone 6 / 7 / 8	750 * 1334	375 * 667	2
IPhone 6p / 7p / 8p	1242 x 2208	414 * 736	3
IPhone X	1125 * 2436	375 * 812	3
HUAWEI P10	1080 x 1920	360 x 640	3

5、像素之间的关系

在不考虑缩放的情况下（理想状态下）：
​ 普通屏(dpr = 1)：1css像素 = 1设备独立像素 = 1物理像素
​ 高清屏(dpr = 2)：1css像素 = 1设备独立像素 = 2物理像素
​ 高清屏(dpr = 3)：1css像素 = 1设备独立像素 = 3物理像素

三、图片高清显示

位图：由像素组成，放大后会失真。
矢量图：有代码计算得来，不会失真。

位图放大失真原因：
一个位图被多个物理像素渲染。

解决办法:
1个位图像素对应1个物理像素。

// 借助媒体查询 
#demo {
    width: 200px;
    height: 200px;
    background-size: 100%;
    background-image: url('./imgs/logo.png');
  }

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #demo {
      background-image: url('./imgs/logo@2x.png');
    }
}

四、视口相关

1、pc端视口

document.documentElement.clientWidth

2、移动端视口

（1）布局视口

移动端布局视口默认都是980px，布局视口的宽度决定了盒子想要沾满屏幕应该写多宽。

（2）视觉视口

用户可见的区域，它的绝对宽度永远和设备屏幕一样宽。

//部分浏览器看不到，一般也不通过代码看
window.innerWidth

（3）理想视口

布局视口=设备宽度
移动端解决方案：开启理想视口、移动端单独设置一套页面

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

五、缩放

1、 PC 端

放大时

• 视口变小
• 元素的 css 像素值不变，但一个css像素所占面积变大了。

缩小时

• 视口变大
• 元素的 css 像素值不变，但一个css像素所占面积变小了。

2、 移动端

放大时

• 布局视口不变
• 视觉视口变小

缩小时

• 布局视口不变
• 视觉视口变大

注意：移动端缩放不会影响页面布局，因为缩放的时候，布局视口视口没有变化。