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

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

移動端H5活動頁面常常需要能夠分享到各種社交App中，常用的有微信、QQ等。

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

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

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

如果對整個頁面進行縮放（使用 meta 標簽），按照設計稿的比例，在高度滿足的情況下寬度會偏小，兩邊會有白底；

就算使用 rem 作為相關間距的單位，也沒有辦法找到一個合適的比例在兩種高度（微信/QQ）下切換，因此統一調成適配 QQ 的，這樣就算在微信下有多余的空白，固定底部的引導下滑箭頭也能使其不會過于突兀。

750*1334 頁面示例

2. 標題簡短

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

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

二維碼圖片不要寫為元素背景，不然長按沒有辦法觸發掃描功能。應使用?img?標簽引入，如下：


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。

轉載于:https://www.cnblogs.com/sybboy/p/6373677.html

總結

以上是生活随笔為你收集整理的移动端H5页面注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。