移動端前端開發總結

一 兼容設備/運行環境

一、手機獨立瀏覽器/微信內置瀏覽器/qq內置瀏覽器/嵌入手機APP（Android|IOS) webview加載

二 移動端前端開發規範

alloyteam.github.io/Spirit/modu…

三 與web網頁不一樣之處

1 瀏覽器內核

Android：Webkit內核

不少手機瀏覽器廠商都宣稱有着自主內核，事實上，他們都是基於開源內核Webkit進行二次開發的，並非徹底的自主內核。

iOS：基於Safari

基於safari二次開發，或者直接使用手機safari內核

注：手機所使用的瀏覽器內核版本通常都比較高，可使用html5,css3的新特性

2 技術上的區別/建議

1 flex佈局--建議

2 使用字體圖標

3 頁面圖片---經過媒體查詢，針對不一樣retina屏 使用2@或者3@圖相關連接

4 meta標籤--針對手機設備meta標籤詳解

5 css樣式 去掉不一樣手機瀏覽器自帶樣式 清除手機瀏覽器自帶樣式

6 代碼結構清晰，代碼量最好不要太多

7 調試工具 f12谷歌調試，真機，同一局域網調試

8 目前經常使用 webpack,sass,h5,css3

三 常見問題

（1） 底部postion:fixed內容出不來

解決：document.documentElement.style.height = window.innerHeight + 'px';

（2）底部position:absolute內容出不來

解決：html{ position:relative }

（3）移動頁面的滾動條問題

解決：IOS和安卓能夠自行隱藏

（4）移動端點擊事件延遲問題

監聽 touch 多點觸控

www.cnblogs.com/qianduanjin…

（5）蘋果頂部有20px的距離，安卓沒有

解決辦法：經過js判斷設備內核：www.jb51.net/article/698…

（6） 1像素問題

(7) ios會緩存頁面

四 開發建議

1 字體

body{font-family:-apple-system, BlinkMacSystemFont,"PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}

2 設備像素比例

1px 至關於多少物理像素

window.devicePixelRatio

3 ios UIwebview 緩存可能致使的問題

ios端 不能用如下的寫法

self.request=[[NSURLRequest alloc]initWithURL:[NSURL URLWithString:htmlString]];

應該寫成：

//加載請求的時候忽略緩存self.request=[NSURLRequest requestWithURL:[NSURL URLWithString:htmlString]cachePolicy:NSURLR

4 動畫問題

（1）transition 閃屏問題

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

高性能動畫方案：github.com/AlloyTeam/M…

（2）減小頁面的重繪迴流

CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite

所觸發的頁面從新layout操做都會放在----------layout-queue 中

由於left會額外觸發layout與paint，而webkit-transform只觸發整個頁面composite

（3）動畫儘量絕對佈局 -------- 減小頁面重排

（4）

5 經常使用meta

<!-- IE使用現有最高版本 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 啓用360瀏覽器的極速模式(webkit) -->

<meta name="renderer" content="webkit">

<!-- 不讓百度轉碼 -->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->

<meta name="format-detection" content="telphone=no, email=no" />

<!-- 頁面寬度等於設備寬度，禁止縮放 -->

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<!-- 啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->

<meta name="apple-mobile-web-app-capable" content="yes" />

7 加settimeout速度加快

$('div').on('touchmove', function(){

setTimeout(function(){

//.….code

},0);

});

8 ios 和 andriod 禁用 視頻自動播放

若有須要：

document.addEventListener('touchstart', function () {

document.getElementsByTagName('audio')[0].play();

document.getElementsByTagName('audio')[0].pause();

});

9 清除input控件會自帶close按鈕

input::-webkit-search-cancel-button {

display: none;

}

其它常見問題積累：caibaojian.com/mobile-web-…

知乎移動端開發+vue踩過的坑： zhuanlan.zhihu.com/p/30419351

40條移動端開發常見問題：www.jb51.net/article/849…

資源連接

github.com/doyoe/trip

騰訊 移動開發團隊

www.alloyteam.com/

騰訊兼容性測試平臺

wetest.qq.com/cloud/deepc…

面向億萬用戶級的移動端Web解決方案：

github.com/AlloyTeam/M…

騰訊移動Web總體解決方案

github.com/AlloyTeam/S…