移動端web開發

像素

1px=dpr * dpr * dp

• px：邏輯像素，瀏覽器使用的抽象單位
• dp，pt設備無關像素，物理像素
• dpr：設備像素縮放比

viewport

viewport使手機瀏覽器先排版正確再縮放

• 頁面渲染在寬高正常px的viewport
• 縮放

移動web最佳設置

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

flex彈性佈局

• 等比佈局：{flex:1}+{flex:1}+{flex:1}
• 混合佈局：{flex:1}+{flex:2}+{flex:100px}

兼容性問題

• android4.4一下，只能兼容flexbox佈局，不兼容flex佈局
  

響應式佈局

• 媒體查詢
• 百分比佈局
• 彈性圖片：img寬度max-width:100%，外包div寬度變化
• 重新佈局，顯示與隱藏：需經常切換位置的元素可使用絕對定位

特別樣式處理

相對單位rem

根據html的font-size，基值設device-width/20最好。用於閱讀的字體font-size不適合用rem

高清圖片避免模糊

寬高用物理像素渲染width:(w_val/dpr)px

1像素邊框

用僞類和scale(0.5)

文本溢出

• 單行溢出（title類）
• 多行溢出（詳情介紹）

// 單行文本溢出...
.inaline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 
// 多行文本溢出
intwoline {
  display: -webkit-box !important;
  overflow: hidden;
   
  text-overflow: ellipsis;
  word-break: break-all;
   
  -webkit-box-orient: vertical;//垂直
  -webkit-line-clamp: 2;//保留2行文本
}

交互優化

tap事件

移動端click事件有300ms延遲，區分單雙擊
解決： 自定義tap事件代替，在touchstart和touchend記錄時間和位置，200ms之內，非常小位移差值，並且沒有觸發touchmove事件，即觸發手持設備的“click”，一般稱爲tap。
使用： 移動框架庫Zepto.js

touch事件

彈性滾動

第三方庫iscroll.js

下拉刷新

touch事件

上拉加載

scroll事件