移動端H5網頁開發(fā)的一些有用的知識

現(xiàn)在APP開發(fā)越來越多的采用原生+H5的混合模式，H5的技術和運用已經越來越成熟。今天給大家分享些非常有用的H5前端移動端的知識，對前端開發(fā)的程序員來說，應該會有一些幫助。

1.meta標簽

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

移動端加上這個標簽才是真正的自適應，不加的話，假如你把一個980px寬度(手機端常規(guī)是980)的PC網頁 放在手機上顯示，倒也能正常顯示不出現(xiàn)滾動條，不過是移動設備對頁面 做了縮小優(yōu)化，所以字體等都相應縮小了。

關于 initial-scale=1 ，這個參照iphone5的尺寸320568，如果你頁面按照640*1136做的話，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頂端狀態(tài)條樣式<meta content="telephone=no" name="format-detection"> 忽略將數字變?yōu)殡娫捥柎a<meta content="email=no" name="format-detection"> 忽略識別emai

 

2.圖片尺寸

做全屏顯示的圖片時，一般為了兼容大部分的手機，圖片尺寸一般設為 640*960

 

3.去除 webkit的滾動條

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

如果要去除全部的，就把 element去掉 同時這個屬性可讓在 div里的滾動如絲般順滑： -webkit-overflow-scrolling : touch;

 

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

 

8.使用圖片時，會發(fā)現(xiàn)圖片下總是有大概 4px的空白，（原因據說圖片是inline，觸發(fā)baseline什么的。。。）常用解決方法有

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

 

9.使用 a標簽的話，盡量讓 a標簽 block，盡量讓用戶可點擊區(qū)域最大化

 

10.對兩個div使用了 transform之后， div下的 z-index有時就會失效，我遇到過，但沒去認真探究，只是把 z-index提高就好了

 

11.在 iOS中，當你點擊比如 input準備輸入時，虛擬鍵盤彈出，整個視窗的 高度 就會變?yōu)?減去鍵盤 的高度，加入你在底部有 fixed的元素比如 btn，這個元素就會跑上來，一般都不會太美觀。我是當 focus時就把它設為 absolute

，視情況而定，也有比如顯示一個新的層，將含有 fixed按鈕的那一層隱藏的情況等等。 另外一種情況（一般在頁面內容很少時 phone5及以上常發(fā)生），當輸入框彈出時 fixed元素擠到輸入框上，當輸入框消失時， fixed元素并沒有隨著輸入框的消失而回到底部，這是因為整個視窗的高度還保持在 減去鍵盤的 高度，需要手動去觸發(fā)讓視窗高度回到正常，然后試了很多方法都沒成功，后來的方案是輸入框消失時給頁面加隱形的很大的padding比如 1000px并在 30ms后改為正常

 

12.禁止用戶選中文字 -webkit-user-select:none

 

13.當把 input設為 width:100%時，有時可能會遇到 input的寬度超出了屏幕，這時可對 input加一個屬性 box-sizing:border-box

關于 box-sizing:border-box，此屬性是把邊框的寬度和 padding包含在盒子的高寬中，假如你設置兩個元素 float且各占 50%，又都有 border時，用這個屬性就可以完美地讓它們能顯示在同一行

 

14.做一個方向箭頭比如 “>” 時，可以用一個正方形的 div，設置 border:1px1px00；然后 rotate(45deg)，這樣就省去了一個圖片

 

15. CSS權重： style是 1000， id是 100， class是 10，普通如 li、 div和偽類是 1，通用如 *是 0；

 

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

 

17.使用 background時， background-position里使用了比如 center left后不能再加具體的數值去定位，比如 center 10px left（暫時兼容性差）

 

18.使用 rem布局時，由于 webkit支持的最小字體大小是 12px，所以使用 html使用 62.5%實際是 12px，這樣很難計算，我的做法是設置成 625%即 100px，然后 1rem就相當于 100px

 

19.移動端字體使用 font-family:Helvetica,sans-serif;我看這也是天貓使用的

 

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

 

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

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

這個效果暫時只有 IOS9上的 safari可以。 用 css3的 blur效果的話，是整層元素全部模糊，而透過模糊層看其他的元素不模糊

 

22.如果需要展示小于 12px的文字，用 transform:scale(%);它將元素縮小，但本身應該占的空間并不會變小，所以比如要元素居左對齊的話，還需設置 translateX 23.在移動端對 input框使用 disabled屬性，會導致元素里面 value值在頁面上被隱藏看不見，可以對元素使用 css3效果 pointer-event:none，意思就是此元素對鼠標事件無效。

以上就是今天的分享，希望能對大家有所幫助。