移動端H5網頁開(kāi)發的(de)一(yī)些(x ★δiē)有(yǒu)用(yòng)的(de)知(zh∑ ī)識

來(lái)源：lexintech.com 發布時('©shí)間(jiān)：2018-01-15♠≠

現(xiàn)在APP開(kāi)發越來(lái)越多(duō)的(de)采用(yòng)✘↓¶☆原生(shēng)+H5的(de)混合模式，H5的(de)技(jì→'★)術(shù)和(hé)運用(yòng)已經©≈®α越來(lái)越成熟。今天給大(dà)家(jiā)分★★©(fēn)享些(xiē)非常有(yǒu)用(yòng)的(de)H5前端移動端↕γ的(de)知(zhī)識，對(duì)前端開(kāi)發的( φ≠de)程序員(yuán)來(lái)說(♦πshuō)，應該會(huì)有(yǒu)一(yī)些(xiē)∏γσ幫助。

移動端H5網頁開(kāi)發的(de)一(yī)些(xiē)有(yǒu)用(yòng)的(de)知(zhī)識

1.meta标簽

移動端加上(shàng)這(zhè)個(gè)标簽才是(shì)真正的(de₹™®)自(zì)适應，不(bù)加的(de)話(huà)，假如(rú)你(✔✘♦nǐ)把一(yī)個(gè)980px寬度(手機(÷™∏→jī)端常規是(shì)980)的(de)PC網頁¶✔ 放(fàng)在手機(jī)上(shàng)顯示，倒也(yě)能(nén≈∞g)正常顯示不(bù)出現(xiàn)滾動條，不(bù)過是(shì)移動設€Ω備對(duì)頁面做(zuò)了(le)縮小(xiǎo)優化(huà)，所以♠≥δφ字體(tǐ)等都(dōu)相(xiàng)應縮小(xiǎo)了(×≥le)。

關于 initial-scale=1 ，這($→zhè)個(gè)參照(zhào)iphone5的(de)尺寸320≥₹<568，如(rú)果你(nǐ)頁面按照(zhào)640<®*1136做(zuò)的(de)話(huà)，scale就(jiù)設為(wε☆σ•èi)0.5

2.圖片尺寸

做(zuò)全屏顯示的(de)圖片時(shí)，一(yī)般為(wèi)">¥≠了(le)兼容大(dà)部分(fēn)的(de ÷)手機(jī)，圖片尺寸一(yī)般設為(wèi) 640*96↑÷λ 0

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

element::-webkit-scro"¶ llbar{display: none;}

如(rú)果要(yào)去(qù)除全部的(de)，就(jiù)¥σ♥‍把 element去(qù)掉同時(shí)這(©<‍zhè)個(gè)屬性可(kě)讓在 div裡(lǐ)的♥α☆♥(de)滾動如(rú)絲般順滑： -webk&®it-overflow-scrolling : touch;

7.在移動端做(zuò)動畫(huà)效果的(de)話(huδ&à)，如(rú)果通(tōng)過改變絕對(duì)定位的 π↕σ(de) top，或者 margin的(de≥Ω≈)話(huà)做(zuò)出來(lái)的(d©∞e)效果很(hěn)差，很(hěn)不(bù)流暢，而使δ♥§用(yòng) css3的(de) transition、 trans↔★form或者 animation的(de)效果将會(huì)非常棒（這(zσβhè)一(yī)方面 IOS比 andrγ ‍φoid又(yòu)要(yào)好(hǎo)不(bù)少(shǎo)） ←←δ。如(rú)果用(yòng) **3d（tran'≠slate3d）來(lái)實現(xiàn)動畫(huà)，會(huì)開↕<(kāi)啓 GPU加速，動畫(huà)會(huì)更©€λ加流暢，但(dàn)硬件(jiàn)配置差的(de)安卓用(yòng)起來γ∏✘π(lái)會(huì)耗很(hěn)多(duō)性能(néng)♣≈

8.使用(yòng)圖片時(shí)，會(huì)發現(xiàn)圖★≈片下(xià)總是(shì)有(yǒu)大(dà)概 ★§ 4px的(de)空(kōng)白(bái)，（原因據說(shuō)圖片是(™ >shì)inline，觸發baseline什(shén)麽的(de)。λ€∞。。）常用(yòng)解決方法有(yǒu)

img{display:block}；img{vert₩™♦ical-align:top}

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

10.對(duì)兩個(gè)div使用(yòn•∑g)了(le) transform之後，→₹ div下(xià)的(de) z-index有(yǒu)時(shí)就("≈jiù)會(huì)失效，我遇到(dào)過，但(dàn)沒去(×£↑≈qù)認真探究，隻是(shì)把 z-index提高(±✔®gāo)就(jiù)好(hǎo)了(le)

11.在 iOS中，當你(nǐ)點擊比如(rú) inpu§≠ ∞t準備輸入時(shí)，虛拟鍵盤彈出，整個(gè)視(↓‍shì)窗(chuāng)的(de) 高(gāo)度就(Ω₹jiù)會(huì)變為(wèi) 減去(qù)鍵盤的(de)高(gāo)度✔≠γ，加入你(nǐ)在底部有(yǒu) fixed的(de)元素比如(rú) bαβ≤¥tn，這(zhè)個(gè)元素就(jiù)會π$ ₩(huì)跑上(shàng)來(lái)，π≠一(yī)般都(dōu)不(bù)會(huì)太★↑≤美(měi)觀。我是(shì)當 focus時(shí)就(jiù)♥↕♥把它設為(wèi) absolute

，視(shì)情況而定，也(yě)有(yǒu)比如(rú)顯示一(y₹♥ī)個(gè)新的(de)層，将含有(yǒu) fixed按鈕₹ σ的(de)那(nà)一(yī)層隐藏的(de)情況等等。另外(wài)↑™一(yī)種情況（一(yī)般在頁面內(∑π₩✔nèi)容很(hěn)少(shǎo)時(shí) ph>✘one5及以上(shàng)常發生(shēng)），當輸入框彈出時(s♥Ω hí) fixed元素擠到(dào)輸入框上(shàng)，當<∞ ₽輸入框消失時(shí)， fixed元素并沒有(yǒu)随著(¥↕<zhe)輸入框的(de)消失而回到(dào)底部，這(zhè)是(♥↓<φshì)因為(wèi)整個(gè)視(shì)窗(chuāng)的(d↔§∑e)高(gāo)度還(hái)保持在減去(qù)鍵盤的(de∑★γ ) 高(gāo)度，需要(yào)手動去(qù)觸發讓視(shì∏≥)窗(chuāng)高(gāo)度回到(dào®¶')正常，然後試了(le)很(hěn)多(duō)方法都(dōu)沒成功，後‍¶÷來(lái)的(de)方案是(shì)輸入框消失時(shí)給頁面加β₩" 隐形的(de)很(hěn)大(dà)的(de)padding比如(rú ) 1000px并在 30ms後改為(wèi)正常

12.禁止用(yòng)戶選中文(wén)字 -webkit-user-se ♥lect:none

13.當把 input設為(wèi) width:$©≠≤100%時(shí)，有(yǒu)時(shí)可(kě)能(néng)會∞Ωδ✔(huì)遇到(dào) input的(♦©Ωde)寬度超出了(le)屏幕，這(zhè)時(shí)可(kě)對(duì) ≤↔&φinput加一(yī)個(gè)屬性 box-sizing:border-b$←★ox

關于 box-sizing:border-box，此屬性是(shì)把邊框的®∑★♠(de)寬度和(hé) padding包含在盒子(zǐ→£)的(de)高(gāo)寬中，假如(rú)你(¥↕★nǐ)設置兩個(gè)元素 float且各占 50%•¶，又(yòu)都(dōu)有(yǒu) b‍®πorder時(shí)，用(yòng)這♣£(zhè)個(gè)屬性就(jiù)可(kě)以完美(měi)地(☆☆dì)讓它們能(néng)顯示在同一(yī)行(xíng★↓‌)

14.做(zuò)一(yī)個(gè)方向箭頭比如(rú) & ←↔♠ldquo;>” 時(shí)，可♠←(kě)以用(yòng)一(yī)個(gè×π)正方形的(de) div，設置 border:1px↕♦δ✘1px00；然後 rotate(45deg)，這(zhè)樣就(π☆ jiù)省去(qù)了(le)一(yī)個(gè)☆®♦圖片

15. CSS權重： style是(s÷♣<↔hì) 1000， id是(shì) 100， clasα♦<εs是(shì) 10，普通(tōng)如(rú) li、 div≠™和(hé)僞類是(shì) 1，通(tō ↓≥ng)用(yòng)如(rú) *是(shì) 0；

16.使用(yòng) rem時(shí)₽₩，設某個(gè) div比如(rú)的(de) h ♠★eight:3rem;line-heighγ€t:1.5rem;overflow:hidden;時(s<∞✘•hí)，在某些(xiē) android手機(jī)上(shàn>$§g)可(kě)能(néng)會(huì)出現(xiàn)顯示不(bù)✘ ε止兩行(xíng),第三行(xíng)會λ✔ (huì)顯示點頭部。解決：利用(yòng) js獲取文(wén)字 >∏$line-height再去(qù)設置 div高(gāo)度

17.使用(yòng) background時(shí)， backgr♣γπound-position裡(lǐ)使用(yòng)了(le) ®比如(rú) center left後不(bù)能(néng)再加 Ω具體(tǐ)的(de)數(shù)值去(q←ε≈ù)定位，比如(rú) center 10px left（暫時(shí)兼容性✔←差）

18.使用(yòng) rem布局時(sh♠δ≤í)，由于 webkit支持的(de)最小(xiǎΩ‌•εo)字體(tǐ)大(dà)小(xiǎo)是(sβ‌hì) 12px，所以使用(yòng) ☆σβhtml使用(yòng) 62.5%實際是(shì) 12px，這βγ♦(zhè)樣很(hěn)難計(jì)算(suàn)，我的σλ☆♦(de)做(zuò)法是(shì)設置成 625%即 100px，然後 1r✘α♣ em就(jiù)相(xiàng)當于 100px

19.移動端字體(tǐ)使用(yòng) font-¥∑family:Helvetica,sans-serif;我看(kàn)這(z©∞hè)也(yě)是(shì)天貓使用(y♠←òng)的(de)

20.在 iphone原生(shēng)鍵盤上(shàng)β☆用(yòng) keyup統計(jì)字符數(s'÷>'hù)時(shí)，系統不(bù)會(huì)自(zìφ≈)動監控你(nǐ)選擇文(wén)字的(de)¥λ事(shì)件(jiàn)，比如(rú)打了×≈€(le)多(duō)個(gè)拼音(yīn)，可(kě)能(néng)選≤✘✔ε擇的(de)實際文(wén)字比輸入的(de)字符數(shù)多€>¶'(duō)或者少(shǎo)，但(dàn)無法在用(yòng)戶确定>>↔≤自(zì)己的(de)輸入時(shí)監控到(dào) keyup（其他(•tā)事(shì)件(jiàn)也(yě)一(yī)樣）判斷字符數(∏₹<shù)。改成 input事(shì)件(jiàn)就(jiù)可(kě÷←)以了(le)

21.實現(xiàn)毛玻璃效果，透過背景看(kàn)其他(tā)元素™α✔ 模糊，自(zì)身(shēn)元素不(bù)模糊。

-webkit-backdrop-filter: sa"§turate(180%) blur(20px);backgroun÷"‌d: rgba(0,0,0,0.5);

這(zhè)個(gè)效果暫時(shí)隻有(yǒu) ∑€'↑IOS9上(shàng)的(de) saf$≈ari可(kě)以。用(yòng) css3的(de) blur效αΩ±σ果的(de)話(huà)，是(shì)整層元素全部模糊，而透過模糊層看(kàn"☆€π)其他(tā)的(de)元素不(bù)模糊

22.如(rú)果需要(yào)展示小(xiǎo)于 12px的(™∏de)文(wén)字，用(yòng) transform:scale☆♥(%);它将元素縮小(xiǎo)，但(dàn)本身(shēn)&λε應該占的(de)空(kōng)間(jiān)并不(bù)會(huì)變‍"∑∑小(xiǎo)，所以比如(rú)要(yào)元素居左對(duì)齊的↕≥ α(de)話(huà)，還(hái)需設置 translateX 23.在移←♦₹動端對(duì) input框使用(yòng) disa≈£←bled屬性，會(huì)導緻元素裡(l≈±§ǐ)面 value值在頁面上(shàng)被隐藏看(kàn)不•‌φ↓(bù)見(jiàn)，可(kě)以對('εduì)元素使用(yòng) css3效果 pointer-event:n → >one，意思就(jiù)是(shì)此元素對(duì)鼠标事✔φγ€(shì)件(jiàn)無效。

以上(shàng)就(jiù)是(shì)今£‌₩¶天的(de)分(fēn)享，希望能(néng)對(duì)大(dà)∑§±§家(jiā)有(yǒu)所幫助。

上(shàng)一(yī)篇：網站(zhàn)開(kāi)發中一(yī)•≥ ≤些(xiē)設計(jì)師(shī)常犯的(de)錯(cuò)誤
下(xià)一(yī)篇：網站(zhàn)開(kāi)發常用(yòng)的(de)幾種web框架