移动端相关

像素相关

分辨率：代表屏幕要用多少个像素点来展现画面（1920 * 1080 ，代表屏幕横向1920个像素点竖向1080个像素点）

物理像素（physical pixel） = 设备像素（device pixel），指屏幕上的一个像素点，同样大小的屏幕分辨率越高，像素点数量越多，体积越小

css像素 = 逻辑像素（logical pixel）= 设备独立像素（dip：，device independent pixel）

设备像素比（dpr，device pixel ratio）： dpr = 设备像素 / css像素 （缩放比为1时）

• 标清屏：1px 对应 1dp（dpr=1）；2k屏：1px 对应 2dp（dpr=2，一个css像素用 2 * 2的物理像素绘制）

ppi（pixels per inch，每英寸物理像素点） = dpi（dots per inch）

• 以6.1英寸的屏幕为例：若其分辨率为：1782 * 828

缩放相关

放大：让css像素对应更多的物理像素，物理像素大小固定从而达到放大原图的效果

• dpr=1：1css像素对应1物理像素；dpr=2：1css像素对应2 * 2物理像素

缩小：让css像素对应更少的物理像素

• dpr=1：1css像素对应1物理像素；dpr=0.5：2 * 2 css像素对应1物理像素

视口

乔布斯最初发布iphone时，由于当时网页比屏幕大很多，为了解决手机看不全网页提出的解决方案（先把网页装在默认980px宽的视口里，然后视口为了匹配手机屏幕，网页就会整体缩小，那么我们就能看全网页了）

如何避免视口缩放：

<meta name="viewport" 
      content="width=device-width,
               initial-scale=1,
               minimum-scale=1,
               maximum-scale=1,
               user-scalable=no,
               viewport-fit=cover"
>

获取视口宽度：

• window.innerWidth
• document.documentElement.clientWidth
• document.documentElement.getBoundingClientRect().width
• screen.width

获取dpr来判断是否高清屏

• window.devicePixelRation

移动端事件

分类：

• 触摸事件（touch事件，pointer事件）
• 手势事件（gesture事件）
• 传感器事件（sensor事件）

touch事件

touchstart：手指按下

touchmove：手指移动

touchend：手指松开

touchcancel：取消事件

事件属性：

• touches：包含屏幕上所有手指信息
• targetTouches：触发事件元素上所有手指信息
• changedTouches：发生改变的手指
• clientX，clientY：点击位置距屏幕左上角的水平，竖直距离
• pageX，pageY：点击位置距页面左上角的水平，竖直距离

媒体查询（@media）

媒体类型：all（默认值） screen print speech

• eg: @media screen and('min-width:768px')

逻辑：and（与） ，（或） not（非）

特征表达式：

• width / max-width / min-width 宽度
• -webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio dpr（区分高清屏）

常用单位：

• px / % / em / rem / vw / vh
• 1rem等于html的font-size大小（每次只要更改html的字体大小就可以实现等比缩放）

其他问题

兼容问题：

• 对api事先用can i use查询一下
• 文字溢出省略处理：
• • 一般情况： overflow：hidden；text-overflow：elipsis；white-space：nowrap
• • 与flex冲突后：-webkit-line-clam：n 指定省略行

移动端不同屏幕适配方案：

• 在dpr不同的手机上防止1像素边框问题：

let doc = document.documentElement,
    vp = document.querySelector('meta[name="viewport"]'),
    dpr = window.devicePixelRatio || 1;
let scale = 1/dpr,
    vpStr = `width=device-width,initial-scale=${scale},minimum-scale=${scale}, 
             maximum-scale=${scale}, user-scalable=no, viewport-fit=cover`
vp.setAttribute?vp.setAttribute('content',vpStr):null;