[TOC] # 移動前端開發需要注意的要點 ## 輔助優化功能 常用的有如下meta標簽： ~~~ <meta content="telephone=no,email=no" name="format-detection"> //禁止自動識別電話號碼和郵箱 <meta content="yes" name="apple-mobile-web-app-capable"> //蘋果手機：會刪除默認的工具欄和菜單欄，網站開啟對web app程序的支持 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> //蘋果手機：在web app應用下狀態條（屏幕頂部條）的顏色,默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。 <meta name="apple-touch-fullscreen" content="yes" /> //蘋果手機：如果把一個web app添加到了主屏幕中，那么從主屏幕中打開這個web app則全屏顯示 <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /> //蘋果手機：將應用添加到手機主屏幕，會有一個icon可以直接進入 ~~~ ## iPhone、iPad的按鈕默認樣式 iPhone、iPad的按鈕存在默認樣式，如何去除默認樣式呢？ ```css input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none;} ``` ## IE10下的文本框 在IE10下，當文本框輸入內容后，在文本框的右側會出現一個小叉叉 ```css input::-ms-clear { display: none; } ``` 默認高光樣式的處理 功能描述：這個應該并不能算是移動端的兼容問題了，因為很多瀏覽器（webkit內核）均存在這個問題，對于a標簽、聚焦時的input元素都存在這種高光效果。而我們有時候為了用戶體驗需要修改這種樣式（顏色）或者取消這種樣式。 解決方法：為webkit內核瀏覽器增加如下代碼。 ```css input:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-wraite-plaintext-only; } ``` ## 元素點擊高亮樣式的處理 在移動端，出于讓用戶了解是否點擊成功，瀏覽器會在用戶點擊一個a標簽或者Javascript定義的可點擊元素時，出現一個半透明的灰色背景。發明的目的是為了更良好的用戶體驗，但是這種目的在當前反而成了累贅，大多數的產品都希望能夠去掉這個背景。 解決辦法很簡單： ```css -webkit-tap-highlight-color:rgba(255,255,255,0) ``` 可以同時屏蔽 iOS和安卓點擊元素時出現的陰影。`-webkit`表示的是瀏覽器內核前綴，表示能夠應用于所有webkit內核的瀏覽器（蘋果、谷歌等各種主流瀏覽器以及安卓系統自帶的瀏覽器采用的均是此種內核，但是注意，IE不是），tap表示輕敲、輕觸，highlight-color表示的是高亮顏色。rgba是一種全新的（CSS3新增）表示顏色的方式，最后一位表示透明度，將透明度設置為0，在視覺上自然就看不到了。關于瀏覽器內核以及瀏覽器內核前綴可以查看《[瀏覽器內核及內核前綴](https://www.h5course.com/a/20150826301.html)》 # 參考 [https://www.h5course.com/a/20150625215.html](https://www.h5course.com/a/20150625215.html) [https://www.h5course.com/a/20150709246.html](https://www.h5course.com/a/20150709246.html) [most popular CSS Reset](http://cssreset.com/) [http://sentsin.com/web/987.html](http://sentsin.com/web/987.html) [http://sentsin.com/web/54.html](http://sentsin.com/web/54.html) [移動前端知識總結](http://caibaojian.com/mobile-knowledge.html) [移動端制作遇到的坑](http://caibaojian.com/mobile-web-app-fix.html) [html移動端兼容性的調研](https://yuerblog.cc/2017/04/17/html-mobile-compatibility-research/) [移動前端：移動端頁面坑與排坑技巧](http://mdsa.51cto.com/art/201412/459525.htm)