自從HTML5霸氣上線以來，便迅速占領(lǐng)了數(shù)百萬開發(fā)者的使用高地，知名企業(yè)猶如Google、Facebook以及亞馬遜等紛紛從 Adobe Flash 轉(zhuǎn)移到了 HTML5。于是在移動時代來臨之際，HTML5也順勢成為開發(fā)者們的重點遷徙對象，成功引領(lǐng)潮流。然而在開發(fā)的過程中，并不是每個開發(fā)者都能將細微之處做到極致，那如何才能讓你的H5在汪洋大海中獨樹一幟呢？本文將分享幾個妙招，讓你的開發(fā)更完美。

單頁內(nèi)容控制

移動端H5活動頁面經(jīng)常需要分享到社交App（如微信、QQ等）中，而用移動設(shè)備查看頁面時會發(fā)現(xiàn)，微信瀏覽器中有頂部導(dǎo)航欄，但QQ內(nèi)置瀏覽器里不止有頂部導(dǎo)航，底部也有操作欄（safari瀏覽器也一樣），這些都會占用設(shè)計稿顯示區(qū)域。

為了避免打開的web與瀏覽器導(dǎo)航欄發(fā)生沖突，一般會使用多媒體自適應(yīng)的形式，根據(jù)屏幕像素的不同，向上的間距也要相應(yīng)進行變化，而我們設(shè)計常用尺寸是750 x 1334 / 640 x 1136，因此在設(shè)計環(huán)節(jié)就需要考慮單頁內(nèi)容，頁面底部要預(yù)留一定的空白，這樣在微信或QQ中才不會被遮住。

如下圖（QQ內(nèi)置瀏覽器）：頁面設(shè)計尺寸為 750 x 1334，頂部占用 150px，底部占用 110px，共占用了 260px，因此設(shè)計稿內(nèi)容應(yīng)控制在 1334-260=1074px 的高度內(nèi)。編寫代碼時，使用 Chrome 瀏覽器模擬設(shè)備大小，將該尺寸（750*1074）存下來，用于實時查看移動端頁面效果。

H5頁面窗口調(diào)整

根據(jù)HTML5 “一次開發(fā)，多處兼容”的特性，能夠橫跨多種平臺和設(shè)備，而利用meta 標(biāo)簽對頁面進行縮放，使得我們可以直接根據(jù)設(shè)計稿來進行頁面的編寫，不用再進行單位的換算等等，在此注意調(diào)整頁面窗口，禁止用戶縮放就能省去很多不必要的麻煩。

識別錯誤源頭并更改

在做移動端的web開發(fā)的時候；iOS上的Safari總會把長串?dāng)?shù)字識別為電話號碼，文字變成藍色，點擊還會彈出菜單提示用戶是否撥打電話。別的地方倒也罷了，如果在用戶名中出現(xiàn)數(shù)字（例如手機注冊新浪微博的話用戶名就是“手機用戶xxxxxxxx”），這種版式會讓你的app瞬間掉價，按照下列方式便可避免。

禁用后，如果想要頁面識別電話功能，做法如下。

同理，Android平臺中也會無故出現(xiàn)對郵箱地址的識別，將telephone 換成email就OK了。

圓圖邊框設(shè)置

在安卓的開發(fā)平臺上，當(dāng)圓形圖片使用border 時，邊框就任性的變形了（如上圖所示）

這時只需要給img 外嵌套一個元素，為其使用圓角，問題就解決了。

實現(xiàn)打電話&發(fā)短信

1.打電話

2.發(fā)短信

測試二維碼圖片

有時候掃描二維碼之后，會跳轉(zhuǎn)至某個地址，不幸的話微信或者QQ會對這個地址進行溫馨提醒，如下圖所示：

這樣會阻止部分用戶繼續(xù)訪問，從而無法很好的將用戶引導(dǎo)到活動想要推廣的產(chǎn)品/品牌頁面，如 App 的下載頁面等。因此二維碼的掃描測試不能少。

舉個例子，如果二維碼掃描結(jié)果是應(yīng)用的下載地址的話，可以使用應(yīng)用寶的微下載地址來生成二維碼，這是不會被“溫馨提醒”的。

微信二維碼

一般會碰到下面兩個問題

1）同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出 左側(cè)/第一個 二維碼。

解決：可視區(qū)域內(nèi)只能出現(xiàn)一個二維碼。

2）使用?meta?標(biāo)簽縮放頁面后長按二維碼圖片無反應(yīng)。

解決：使用了以下代碼之后，就能長按識別二維碼了~

Retina 顯示屏

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€，如在同樣物理尺寸的屏幕上，蘋果設(shè)備的2倍retina顯示屏中，像素點1個變?yōu)?個,在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍，在此給出的前端的應(yīng)對方案是：

設(shè)計稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2

// 例如圖片寬高為：200px*200px，那么寫法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px.css{font-size:20px;}

禁止IOS和Android用戶選中文字

禁止IOS和Android用戶選中文字，只需按照下列方法即可。

改變placeholder顏色值

如何改變webkit表單輸入框placeholder的顏色值呢？來試試下面的方法。

此外，HTML5開放的標(biāo)準(zhǔn)支持，還有助于為碎片化的移動設(shè)備、不同的屏幕尺寸、差異化的平臺和操作系統(tǒng)開發(fā)應(yīng)用。注意到了上面這些問題，應(yīng)該能讓你的水平提高一個level。