移動端 H5 頁面注意事項

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

設計經常使用尺寸：750X1334 或者 640X1334,包含了手機頂部信號欄的高多。

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

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

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

2.關於連接的分享-QQ

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

<title>QQ中連接的標題由此處獲取</title>
<meta name="description" content="QQ中連接的描述由此處獲取">

<meta itemprop="image" content="http://*.*.com/static/images/share.png" />

 

3. 圖片壓縮

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

4. 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").text(percent+'%'); if(percent==100) { $(".mask").css('display','none'); } }); } loading();

5. CSS 動畫屬性前綴 webkit

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

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

-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) } }