移動端H5頁面注意事項

1. 單個頁面內容不能過多

設計經常使用尺寸：7501334 / 6401134，包含了手機頂部信號欄的高度。

移動端H5活動頁面經常須要可以分享到各類社交App中，經常使用的有微信、QQ等。

使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄，在qq內置瀏覽器裏不止有頂部導航，底部也有操做欄（safari瀏覽器也同樣），這些都會佔用設計稿顯示區域，所以在 設計環節 就須要考慮內容的多少，頁面底部要預留必定的空白，這樣在微信或qq中才不會被遮住。

以下圖（QQ內置瀏覽器）：頁面設計尺寸爲 7501334，頂部佔用 150px，底部佔用 110px，共佔用了 260px，所以設計稿內容應控制在 1334-260=1074px 的高度內。編寫代碼時，使用 Chrome 瀏覽器模擬設備大小，將該尺寸（*7501074*）存下來，用於實時查看移動端頁面效果。

若是頁面已經寫好了，就只能按照上面的尺寸進行內容的調整了，縮小元素間距，縮放圖片大小等。
分享下個人失敗嘗試：

1. 若是對整個頁面進行縮放（使用 meta 標籤），按照設計稿的比例，在高度知足的狀況下寬度會偏小，兩邊會有白底；
2. 就算使用 rem 做爲相關間距的單位，也沒有辦法找到一個合適的比例在兩種高度（微信/QQ）下切換，所以統一調成適配 QQ 的，這樣就算在微信下有多餘的空白，固定底部的引導下滑箭頭也能使其不會過於突兀。

750*1334 頁面示例

2. 標題簡短

移動端瀏覽器導航條寬度有限，簡短的標題可使其展現完整。

3. 二維碼圖片使用 img 標籤引入

二維碼圖片不要寫爲元素背景，否則長按沒有辦法觸發掃描功能。應使用 img 標籤引入，以下：

![](images/qrcode.png)

4. 二維碼圖片記得掃描測試

有時候掃描二維碼以後，會跳轉至某個地址，不幸的話QQ或者微信會對這個地址進行舒適提醒，以下圖所示：

QQ內的舒適提醒

這樣會阻止部分用戶繼續訪問，從而沒法很好的將用戶引導到活動想要推廣的產品/品牌頁面，如 App 的下載頁面等。所以二維碼的掃描測試不能少。

舉個例子，若是二維碼掃描結果是應用的下載地址的話，可使用應用寶的微下載地址來生成二維碼，這是不會被「舒適提醒」的。

5. 使用 Gulp 拼合圖片

若是打算先佈局，後使用自動化工具將圖片拼起來，減小請求數，須要注意：在編寫 CSS 的時候，圖片寬高應固定，圖片拼合後才能經過定位和顯示區域的寬高來展現圖片。

舉個例子，若是佈局時 width: 100%; background-position: center;，使用工具拼合圖片後，該元素區域（100% 的寬度）內會將其餘圖片顯示出來，這不是咱們想要看到的。

6. 關於連接的分享-QQ

若是將頁面連接直接複製分享給其餘人，在手機上接收連接消息的用戶可能會看到連接的相關信息，如頁面標題、描述和圖片。相關信息設置方式以下：

<title>QQ中連接的標題由此處獲取</title> <meta name="description" content="QQ中連接的描述由此處獲取"> <!-- QQ默認獲取的圖片有可能出現縮放問題，效果不佳，能夠經過以下方法進行設置 --> <meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可參考 手機QQ接口文檔：setShareInfo。

問題：即便使用瞭如上的 image 設置方法，仍是沒能顯示預期圖片？
解決：肯定下你發送的連接格式，會不會有所省略，如：somedomain/ 或者 somedomain/index，正確的應爲 somedomain/index.html，才能正確解析到圖片。

若是是打開連接後，在QQ內置瀏覽器裏選擇將頁面分享出去，那通常不會出錯。

7. 圖片壓縮

使用自動化工具 gulp-imagemin（教程） 來壓縮圖片，效果舉例：101 KB => 80.7 KB。後來我使用了在線工具 Tinypng 又進行了一次壓縮，效果舉例：（上面使用 gulp-imagemin 壓縮過的圖片）80.7 KB => 38.1 KB，可見光使用自動化工具來壓縮是不夠的，大部分圖片仍存在較大的壓縮空間，能夠再扔到 Tinypng 裏壓縮一下看看。

8. Loading

代碼段分享，拿走即用~

function loading(){ function Load(){} Load.prototype.loadImgs = function(urls,callback) { this.urls = urls; this.imgNumbers = urls.length; this.loadImgNumbers = 0; var that =this; for(var i=0;i<urls.length;i++){ var obj = new Image(); obj.src = urls[i]; obj.onload = function(){ that.loadImgNumbers++; callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100)); } } }; var loader = new Load(); loader.loadImgs([ // 將全部須要加載的圖片地址寫於此處 "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png" ],function(percent){ // 假設顯示百分比的元素爲 $(".percent") $(".percent").text(percent+'%'); // 加載結束後，隱藏相應的 loading 或遮罩 if(percent==100) { $(".mask").css('display','none'); } }); } // 執行 loading 方法 loading();

9. CSS 動畫屬性前綴 webkit

使用 CSS3 來製做動畫效果的話，webkit 前綴必定記得加，要否則在某些手機下動畫效果是沒有的。
以下：

-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } }

推薦使用自動化工具來處理未加前綴的 CSS 文件，如 gulp-autoprefixer。