关于移动端适配

一. 相关术语总结

设备像素 (device pixel)

1. 屏幕显示的最小单位
2. 没有固定的物理尺寸
3. 在同一个设备上，像素个数是固定的

逻辑像素 (css pixel)

1. 通过css和js设置的都称为逻辑像素

分辨率

如某个设备的分辨率是 1920px * 1080px

1. 像素是分辨率的单位
2. 1920px表示这个设备在长的方向上有1920个像素单位
3. 1080px表示这个设备在短的方向上有1080个像素单位

屏幕尺寸

1. 一般用英寸来表示屏幕尺寸，
2. 英寸是长度单位，1英寸（inch）= 2.54厘米（cm）
3. 5.2英寸指的是对角线长度

屏幕像素密度 ppi (pixels per inch)

1. 表示每英寸拥有的像素个数
2. ppi越大，显示的效果越好
3. 计算公式

PPI =\frac{\sqrt{横向像素^2 + 纵向像素^2}}{屏幕尺寸(英寸)}

设备像素比 dpr (device pixel ratio)

1. 可以通过window.devicePixelRatio获取设备的dpr
2. 计算公式

\frac{设备像素}{逻辑像素}

retina视网膜屏幕

1. 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕
2. 乔布斯：当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了（实际并不是，大概在450ppi以上）

二. 适配方案

html meta 标签

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

1. viewport代表在移动端浏览器中所展现的视图
2. width 可以设置为具体的数字值，如500。也可以设置为特殊值device-width，设备宽度
3. initial-scale 初始缩放
4. user-scalable：no(不允许缩放) yes(允许缩放)

三. 遇到过的问题

html <meta name="viewport">

参考

• （全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
• Using the viewport meta tag to control layout on mobile browsers
  Background