移动web知识点总结梳理

pixel像素基础

• pt
• px : css pixels 逻辑像素，浏览器使用的抽象单位
• dp,pt: device independent pixels 设备无关像素
• dpr: devicePixelRadio 设备像素缩放比

px= (dpr)^2dp ,px(x|y)=2dp

• DPI : 打印机每英寸可以喷的墨汁点数
• PPI： 屏幕每英寸像素数，即单位英寸内的像素密度。（硬件像素）

在计算机显示设备参数描述上二者等价，如iphone5中
ppi=((1136^2+640^2)/4)^1/2=326ppi(视网膜Retina屏)。可视度越低，系统默认设置缩放比越大；ppi越高，像素数越高，图像越清晰

ppi	120	160	240	320
默认缩放比dpr	0.75	1.0	1.5	2.0

Retina,dpr>2者为高清屏

Viewport

• 手机浏览器默认(为了排版正确)：

  • 页面渲染在一个980px(ios)的viewport上
  • 缩放
    • visual viewport:窗口缩放scale
    • layout viewport： 布局缩放（底层，渲染页面）
    • viewport 移动端最佳设置

  layout viewport（布局viewport）=device-width=visual viewport(度量viewport)

<meta 
name='viewport'
content='width=device-width,
initial-scale=1.0,
user-scalable=no'
>

• 移动端设计方案
  • 根据设备实际宽度设计（常用）
  • 1px=1dp：缩放0.5

tap 事件基础

• 300ms

  移动设备上click事件响应要慢300ms。因移动端页面都是pc上页面，默认viewport页面往往需要双击或捏开放大页面。为了确认用户单击还是双击，safari需要300ms的延迟，后来iphone也鉴于此，故成规范。

  • 300ms hack

touch事件基础

• bug: andriod 只会触发一次touchstart，touchmove，touchend
• hack： 在touchmove中加入event.preventDefault
• note： event.preventDefault()会导致默认行为不发生如scroll