移動Web 開發中的一些前端知識收集彙總
原文連接：https://cloud.tencent.com/developer/article/1025371
2018-01-19閱讀 2620
在開發DeveMobile 與EaseMobile 主題 的時候積累了一些移動Web 開發的前端知識，本着記錄總結的目的，特寫這篇文章備忘一下。
要說移動Web 開發與傳統的PC 端開發，感覺也沒什麼不同，但得益於蘋果對於智能機的推動，CSS3+HTML5幾乎可以毫無顧忌的使用，然後瀏覽器端考慮webkit內核的就差不多了。
webkit內核中一些私有的meta標籤
第一個meta標籤是iphone設備中的safari私有meta標籤，它表示：允許全屏模式瀏覽，在ios上，用戶將網頁添加到主屏後，再從主屏幕打開這個網頁，可以隱藏瀏覽器的地址欄和下面的toolbar；
第二個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式，其值有三個：default、black、black-translucent。
第四個meta標籤是指在發送到屏幕的時候默認的命名。
另外還有其他一些meta標籤，表示的意思直接見註釋：
自定義主屏上的圖標
用戶添加到主屏後，如果網站沒有圖標，則默認主屏上的圖標爲當前網頁的截圖，你可以通過下面的代碼指定在普通和retina屏幕上的icon：
添加初始化圖片
用戶點擊你桌面上的webapp的圖標後，打開會加載瀏覽器（實際上是webkit webview模塊），然後下載、解析、渲染，在這個過程中，ios允許我們使用一個初始化圖片來替代白色的瀏覽器屏幕：
你可以查看《將你的網站打造成一個iOS Web App》、《iOS / Android 移動設備中的 Touch Icons》這兩篇文章瞭解更多。
關閉iOS中鍵盤自動大寫、自動更正、自動完成
在iOS中，當虛擬鍵盤彈出時，默認情況下鍵盤是開啓首字母大寫的功能的，根據某些業務場景，可能我們需要關閉這個功能，移動版本webkit爲input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關閉鍵盤默認首字母大寫。還有的是自動更正、自動完成給你可以一併取消：
文件上傳, 從相機捕獲媒體
電話短信
移除 iOS 默認的按鈕樣式
在iOS 中，默認會將所有的按鈕（input）強制加上一個圓角和漸變樣式（IOS7的不知是怎樣的了），要移除這個默認樣式，用下面的代碼（建議直接reset那裏添加）：
iOS 瀏覽器橫屏時會重置字體大小的問題
iOS 瀏覽器橫屏時會重置字體大小，設置 text-size-adjust 爲 none 可以解決ios上的問題，但桌面版safari的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 爲 100% 。
CSS3的transition 閃屏問題
使用css3動畫的時儘量利用3D加速，從而使得動畫變得流暢（可參考《移動Web 開發中的 Off Canvas 導航》這篇文章）。動畫過程中的動畫閃白可以通過backface-visibility 隱藏。
其他CSS的雜項
click 事件
ios的safari的click事件在短按屏幕時會有明顯延遲（相對用戶手離開屏幕那一刻大約300ms），因此建議採用 touchstart 事件。或者是說使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。