移動端H5網頁開發的(de)一些有用(yòng)的(de)知識

現在APP開發越來(lái)越多(duō)的(de)采用(yòng)原生+H5的(de)混合模式，H5的(de)技術和(hé)運用(yòng)已經越來(lái)越成熟。今天給大(dà)家分(fēn)享些非常有用(yòng)的(de)H5前端移動端的(de)知識，對(duì)前端開發的(de)程序員(yuán)來(lái)說，應該會有一些幫助。

1.meta标簽

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

移動端加上這(zhè)個(gè)标簽才是真正的(de)自适應，不加的(de)話(huà)，假如你把一個(gè)980px寬度(手機端常規是980)的(de)PC網頁 放在手機上顯示，倒也(yě)能正常顯示不出現滾動條，不過是移動設備對(duì)頁面 做(zuò)了(le)縮小優化(huà)，所以字體等都相應縮小了(le)。

關于 initial-scale=1 ，這(zhè)個(gè)參照(zhào)iphone5的(de)尺寸320568，如果你頁面按照(zhào)640*1136做(zuò)的(de)話(huà)，scale就設爲0.5

<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允許全屏浏覽<meta content="black" name="apple-mobile-web-app-status-bar-style"> IOS中Safari頂端狀态條樣式<meta content="telephone=no" name="format-detection"> 忽略将數字變爲電話(huà)号碼<meta content="email=no" name="format-detection"> 忽略識别emai

 

2.圖片尺寸

做(zuò)全屏顯示的(de)圖片時(shí)，一般爲了(le)兼容大(dà)部分(fēn)的(de)手機，圖片尺寸一般設爲 640*960

 

3.去除 webkit的(de)滾動條

element::-webkit-scrollbar{display: none;}

如果要去除全部的(de)，就把 element去掉 同時(shí)這(zhè)個(gè)屬性可(kě)讓在 div裏的(de)滾動如絲般順滑： -webkit-overflow-scrolling : touch;

 

7.在移動端做(zuò)動畫(huà)效果的(de)話(huà)，如果通(tōng)過改變絕對(duì)定位的(de) top，或者 margin的(de)話(huà)做(zuò)出來(lái)的(de)效果很差，很不流暢，而使用(yòng) css3的(de) transition、 transform或者 animation的(de)效果将會非常棒（這(zhè)一方面 IOS比 android又要好不少）。 如果用(yòng) **3d（translate3d）來(lái)實現動畫(huà)，會開啓 GPU加速，動畫(huà)會更加流暢，但硬件配置差的(de)安卓用(yòng)起來(lái)會耗很多(duō)性能

 

8.使用(yòng)圖片時(shí)，會發現圖片下(xià)總是有大(dà)概 4px的(de)空白，（原因據說圖片是inline，觸發baseline什(shén)麽的(de)。。。）常用(yòng)解決方法有

img{display:block}；img{vertical-align:top}

 

9.使用(yòng) a标簽的(de)話(huà)，盡量讓 a标簽 block，盡量讓用(yòng)戶可(kě)點擊區(qū)域最大(dà)化(huà)

 

10.對(duì)兩個(gè)div使用(yòng)了(le) transform之後， div下(xià)的(de) z-index有時(shí)就會失效，我遇到過，但沒去認真探究，隻是把 z-index提高(gāo)就好了(le)

 

11.在 iOS中，當你點擊比如 input準備輸入時(shí)，虛拟鍵盤彈出，整個(gè)視窗(chuāng)的(de) 高(gāo)度 就會變爲 減去鍵盤 的(de)高(gāo)度，加入你在底部有 fixed的(de)元素比如 btn，這(zhè)個(gè)元素就會跑上來(lái)，一般都不會太美(měi)觀。我是當 focus時(shí)就把它設爲 absolute

，視情況而定，也(yě)有比如顯示一個(gè)新的(de)層，将含有 fixed按鈕的(de)那一層隐藏的(de)情況等等。 另外一種情況（一般在頁面内容很少時(shí) phone5及以上常發生），當輸入框彈出時(shí) fixed元素擠到輸入框上，當輸入框消失時(shí)， fixed元素并沒有随著(zhe)輸入框的(de)消失而回到底部，這(zhè)是因爲整個(gè)視窗(chuāng)的(de)高(gāo)度還(hái)保持在 減去鍵盤的(de) 高(gāo)度，需要手動去觸發讓視窗(chuāng)高(gāo)度回到正常，然後試了(le)很多(duō)方法都沒成功，後來(lái)的(de)方案是輸入框消失時(shí)給頁面加隐形的(de)很大(dà)的(de)padding比如 1000px并在 30ms後改爲正常

 

12.禁止用(yòng)戶選中文字 -webkit-user-select:none

 

13.當把 input設爲 width:100%時(shí)，有時(shí)可(kě)能會遇到 input的(de)寬度超出了(le)屏幕，這(zhè)時(shí)可(kě)對(duì) input加一個(gè)屬性 box-sizing:border-box

關于 box-sizing:border-box，此屬性是把邊框的(de)寬度和(hé) padding包含在盒子的(de)高(gāo)寬中，假如你設置兩個(gè)元素 float且各占 50%，又都有 border時(shí)，用(yòng)這(zhè)個(gè)屬性就可(kě)以完美(měi)地讓它們能顯示在同一行

 

14.做(zuò)一個(gè)方向箭頭比如 “>” 時(shí)，可(kě)以用(yòng)一個(gè)正方形的(de) div，設置 border:1px1px00；然後 rotate(45deg)，這(zhè)樣就省去了(le)一個(gè)圖片

 

15. CSS權重： style是 1000， id是 100， class是 10，普通(tōng)如 li、 div和(hé)僞類是 1，通(tōng)用(yòng)如 *是 0；

 

16.使用(yòng) rem時(shí)，設某個(gè) div比如的(de) height:3rem;line-height:1.5rem;overflow:hidden;時(shí)，在某些 android手機上可(kě)能會出現顯示不止兩行,第三行會顯示點頭部。 解決：利用(yòng) js獲取文字 line-height再去設置 div高(gāo)度

 

17.使用(yòng) background時(shí)， background-position裏使用(yòng)了(le)比如 center left後不能再加具體的(de)數值去定位，比如 center 10px left（暫時(shí)兼容性差）

 

18.使用(yòng) rem布局時(shí)，由于 webkit支持的(de)最小字體大(dà)小是 12px，所以使用(yòng) html使用(yòng) 62.5%實際是 12px，這(zhè)樣很難計算(suàn)，我的(de)做(zuò)法是設置成 625%即 100px，然後 1rem就相當于 100px

 

19.移動端字體使用(yòng) font-family:Helvetica,sans-serif;我看這(zhè)也(yě)是天貓使用(yòng)的(de)

 

20.在 iphone原生鍵盤上用(yòng) keyup統計字符數時(shí)，系統不會自動監控你選擇文字的(de)事件，比如打了(le)多(duō)個(gè)拼音(yīn)，可(kě)能選擇的(de)實際文字比輸入的(de)字符數多(duō)或者少，但無法在用(yòng)戶确定自己的(de)輸入時(shí)監控到 keyup（其他(tā)事件也(yě)一樣）判斷字符數。 改成 input事件就可(kě)以了(le)

 

21.實現毛玻璃效果，透過背景看其他(tā)元素模糊，自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);background: rgba(0,0,0,0.5);

這(zhè)個(gè)效果暫時(shí)隻有 IOS9上的(de) safari可(kě)以。 用(yòng) css3的(de) blur效果的(de)話(huà)，是整層元素全部模糊，而透過模糊層看其他(tā)的(de)元素不模糊

 

22.如果需要展示小于 12px的(de)文字，用(yòng) transform:scale(%);它将元素縮小，但本身應該占的(de)空間并不會變小，所以比如要元素居左對(duì)齊的(de)話(huà)，還(hái)需設置 translateX 23.在移動端對(duì) input框使用(yòng) disabled屬性，會導緻元素裏面 value值在頁面上被隐藏看不見，可(kě)以對(duì)元素使用(yòng) css3效果 pointer-event:none，意思就是此元素對(duì)鼠标事件無效。

以上就是今天的(de)分(fēn)享，希望能對(duì)大(dà)家有所幫助。