移動端開發(fā)需要注意的事項
最基本的是布局和適配
一般布局都會用flex布局
適配用單位rem
1黔衡、防止手機中網(wǎng)頁放大和縮小剔桨，這點是最基本的娱挨，在設(shè)置meta中的viewport
使用viewport使頁面禁止縮放邦危。 通常把user-scalable設(shè)置為0來關(guān)閉用戶對頁面視圖縮放的行為诽凌。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2毡熏、單位
<script>
? ? window.onload = function(){
? ? ? getRem(750,100)
? ? };? ?
? ? window.onresize = function(){
? ? ? getRem(750,100)? ?
? ? };? ?
? function getRem(pwidth,prem){
? ? var html = document.getElementsByTagName("html")[0];? ? ? ?
? ? var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
? ? html.style.fontSize = oWidth/pwidth*prem + "px";? ? ? ? ? ? ? ? ? ? ? ? ? ?
? }
</script>
3、安卓瀏覽器看背景圖片侣诵，有些設(shè)備會模糊痢法。
經(jīng)過研究，是devicePixelRatio作怪杜顺，因為手機分辨率太小财搁，如果按照分辨率來顯示網(wǎng)頁，這樣字會非常小躬络，
想讓圖片在手機里顯示更為清晰尖奔，必須使用2x的背景圖來代替img標(biāo)簽（一般情況都是用2倍）然后background-size:contain;
注：devicePixelRatio屬性
該 Window 屬性 devicePixelRatio 能夠返回當(dāng)前顯示設(shè)備的物理像素分辨率與 CSS 像素分辨率的比率。
4洗鸵、apple-mobile-web-app-capable
設(shè)置Web應(yīng)用是否以全屏模式運行越锈，content設(shè)置為yes仗嗦，Web應(yīng)用會以全屏模式運行膘滨，反之，則不會稀拐。content的默認(rèn)值是no火邓，表示正常顯示。window.navigator.standalone可以用來來確定網(wǎng)頁是否以全屏模式顯示德撬。
<meta name="apple-mobile-web-app-capable" content="yes">
5铲咨、format-detection
啟動或禁用自動識別頁面中的電話號碼和郵箱。
< meta name="format-detection" content="telephone=no">
< meta name="format-detection" content="email=no">
6蜓洪、html5調(diào)用安卓或者ios的撥號功能
html5提供了自動調(diào)用撥號的標(biāo)簽纤勒，只要在a標(biāo)簽的href中添加tel:就可以了。
轉(zhuǎn)撥
<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>
直接撥打
<a href="tel:15677776767">點擊撥打15677776767</a>
7隆檀、上下拉動滾動條時卡頓摇天、慢
Element {
? ? -webkit-user-select: none;
? ? -moz-user-select: none;
? ? -khtml-user-select: none;
? ? user-select: none;
}
Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling
8粹湃、禁止鏈接的callout信息
當(dāng)在iOS上一直按住一個目標(biāo)元素時，Safari會展示一個關(guān)于這個鏈接的callout信息泉坐。webkit-touch-callout屬性允許禁用掉這一行為为鳄。 此屬性目前只針對ios
element {
? ? -webkit-touch-callout: none;
}
9、iphone及ipad下輸入框默認(rèn)內(nèi)陰影
-webkit-appearance: none;
10腕让、旋轉(zhuǎn)屏幕時孤钦，字體大小調(diào)整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
? ? -webkit-text-size-adjust:100%;
}
11、圓角bug
安卓圓角失效：background-clip: padding-box;
12纯丸、設(shè)置緩存
手機頁面通常在第一次加載后會進行緩存偏形，然后每次刷新會使用緩存而不是去重新向服務(wù)器發(fā)送請求。如果不希望使用緩存可以設(shè)置no-cache液南。
<meta http-equiv="Cache-Control" content="no-cache" />
13壳猜、長時間按住頁面出現(xiàn)閃退
element { -webkit-touch-callout: none; }
14、ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩
Element {-webkit-tap-highlight-color:rgba(255,255,255,0)}
15滑凉、Retina屏的1px邊框
Element{border-width: thin;}
注：Retina（一種新型高分辨率的顯示標(biāo)準(zhǔn)）
所謂“Retina”是一種顯示標(biāo)準(zhǔn)统扳，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細(xì)膩程度
16畅姊、頂部狀態(tài)欄背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
如果content設(shè)置為default咒钟，則狀態(tài)欄正常顯示。如果設(shè)置為blank若未，則狀態(tài)欄會有一個黑色的背景朱嘴。如果設(shè)置為blank-translucent，則狀態(tài)欄顯示為黑色半透明粗合。
如果設(shè)置為default或blank萍嬉，則頁面顯示在狀態(tài)欄的下方，即狀態(tài)欄占據(jù)上方部分隙疚，頁面占據(jù)下方部分壤追，二者沒有遮擋對方或被遮擋。
如果設(shè)置為blank-translucent供屉，則頁面會充滿屏幕行冰，其中頁面頂部會被狀態(tài)欄遮蓋住（會覆蓋頁面20px高度伶丐，而iphone4和itouch4的Retina屏幕為40px）悼做。
默認(rèn)值是default。
