h5作移動應用開發部分技巧

一、使用多種分別率設備：利用viewport標籤
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

 

二、刪除默認的蘋果工具欄和菜單欄，如手機號自動加下劃線：
<meta name="apple-mobile-web-app-capable" content="yes">
content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。

 

三、控制蘋果手機狀態欄樣式：<meta name="apple-mobile-web-app-status-bar-style" content="black">

 

四、當你觸摸並按住觸摸目標時候，禁止或顯示系統默認菜單。
-webkit-touch-callout 是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。
在iOS上，當你觸摸並按住觸摸的目標，好比一個連接，Safari瀏覽器將顯示連接有關的系統默認菜單。這個屬性能夠讓你禁用系統默認菜單。
*{-webkit-touch-callout:none;}

 

五、CSS裏的user-select屬性用來禁止用戶用鼠標在頁面上選中文字、圖片等，也就是，讓頁面內容不可選，使更像原生應用：
*{-webkit-user-select:none;}

 

六、防止出現點擊頁面元素出現閃一下黑色的現象：
*{-webkit-tap-highlight-color:rgba(255,255,255,0)}

七、滑動更流暢

-webkit-overflow-scrolling: touchoverflow-scrolling: touch