移動端H5頁面注意事項
首發於簡書博客：http://www.jianshu.com/p/e958...javascript
2017-11-25 更新：5. 使用 Gulp 拼合圖片css
1. 單個頁面內容不能過多
設計經常使用尺寸：750 x 1334 / 640 x 1134，包含了手機頂部信號欄的高度。html
移動端H5活動頁面經常須要可以分享到各類社交App中，經常使用的有 微信、QQ 等。java
使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄，在qq內置瀏覽器裏不止有 頂部導航，底部也有 操做欄（safari瀏覽器也同樣），這些都會佔用設計稿顯示區域，所以在 設計環節 就須要考慮內容的多少，頁面底部要 預留必定的空白，這樣在微信或qq中才不會被遮住。git
以下圖（QQ內置瀏覽器）：頁面設計尺寸爲 750 x 1334，頂部佔用 150px，底部佔用 110px，共佔用了 260px，所以設計稿內容應控制在 1334-260=1074px 的高度內。編寫代碼時，使用 Chrome 瀏覽器模擬設備大小，將該尺寸（750*1074）存下來，用於實時查看移動端頁面效果。github
若是頁面已經寫好了，就只能按照上面的尺寸進行內容的調整了，縮小元素間距，縮放圖片大小等。web
分享下個人失敗嘗試：npm
- 若是對整個頁面進行縮放（使用 meta 標籤），按照設計稿的比例，在高度知足的狀況下寬度會偏小，兩邊會有白底；
- 就算使用 rem 做爲相關間距的單位，也沒有辦法找到一個合適的比例在兩種高度（微信/QQ）下切換，所以統一調成適配 QQ 的，這樣就算在微信下有多餘的空白，固定底部的引導下滑箭頭也能使其不會過於突兀。
2. 標題簡短
移動端瀏覽器導航條寬度有限，簡短的標題可使其展現完整。gulp
3. 二維碼圖片使用 img 標籤引入
二維碼圖片不要寫爲元素背景，否則長按沒有辦法觸發掃描功能。應使用 img 標籤引入，以下：api
4. 二維碼圖片記得掃描測試
有時候掃描二維碼以後，會跳轉至某個地址，不幸的話QQ或者微信會對這個地址進行舒適提醒，以下圖所示：
這樣會阻止部分用戶繼續訪問，從而沒法很好的將用戶引導到活動想要推廣的產品/品牌頁面，如 App 的下載頁面等。所以二維碼的掃描測試不能少。
舉個例子，若是二維碼掃描結果是應用的下載地址的話，可使用應用寶的微下載地址來生成二維碼，這是不會被「舒適提醒」的。
5. 使用 Gulp 拼合圖片
若是打算先佈局，後使用自動化工具（如：gulp-sprite-generator2）將圖片拼起來（即經過 css 生成精靈圖），減小請求數，須要注意：在編寫 CSS 的時候，圖片寬高應固定，圖片拼合後才能經過定位和顯示區域的寬高來展現圖片。
舉個例子，若是佈局時
width: 100%; background-position: center;，使用工具拼合圖片後，該元素區域（100% 的寬度）內會將其餘圖片顯示出來，這不是咱們想要看到的。
建議先將圖片拼起來再佈局，可使用：gulp.spritesmith，一步獲取合併的精靈圖和對應的 css 文件。
2017-11-25 更新：推薦一個自制的 Electron 客戶端工具 Splice（集合了經常使用的 gulp 插件，包括上述的兩種精靈圖生成插件）。
補充兩個關於使用精靈圖的問題：
1.將多張圖片經過工具生成精靈圖和 css 文件：
若是你生成精靈圖時不當心使用了重複的圖片（文件夾裏存在重複的圖片不一樣的名字），在手機上會出現圖片大小位置都出錯的狀況，雖然電腦瀏覽器（Chrome）里正常。
解決：去掉那張重複的圖片從新生成一次精靈圖和 css 就行了。
2.直接經過 css 文件生成精靈圖：
製做手機端的活動頁面時，常常須要翻頁的效果，能夠的話最好每一個頁面的圖片拼成一張精靈圖（工具提供正則篩選圖片路徑的功能）。儘可能不要將全部頁面的圖片統一拼成一張，若是你拼完沒問題也就算了，可是我這邊遇到過同上面第一點同樣的問題，手機上頁面效果出錯。
解決：最後排查不出問題，經過將多個頁面的圖片分紅三張精靈圖才勉強度過難關。
6. 關於連接的分享-QQ
若是將頁面連接直接複製分享給其餘人，在手機上接收連接消息的用戶可能會看到連接的相關信息，如頁面標題、描述和圖片。相關信息設置方式以下：
<title>QQ中連接的標題由此處獲取</title> <meta name="description" content="QQ中連接的描述由此處獲取"> <!-- QQ默認獲取的圖片有可能出現縮放問題，效果不佳，能夠經過以下方法進行設置 --> <meta itemprop="image" content="http://*.*.com/static/images/share.png" />
問題：即便使用瞭如上的 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 裏壓縮一下看看。
在線的 Tinypng 能夠無限次使用，若是想要使用其 API 來進行壓縮自動化的話，可使用 gulp-tinypng 等插件，可是有每個月壓縮圖片數量限制，每個月前500張圖片免費，其餘收費狀況參考官網說明。使用其 API 還須要獲取 API Key，這裏能夠獲取。
我的以爲想要免費的話使用 API 會有數量限制，時刻惦記着數量有點心累，不如直接使用在線工具，也不麻煩~
8. Loading
首屏 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。
10. Swiper.js & Animate.css
你只須要 Swiper.js 和 Animate.css 便可打造（簡單的）移動端 H5 活動頁面~
Swiper 是純 javascript 打造的滑動特效插件，面向手機、平板電腦等移動終端。
Animate.css 是純 CSS 編寫而成的動畫庫，包含多種常見的 CSS 動畫。
引用 Swiper.js，同時在 Animate.css 中尋找須要的動畫效果複製粘貼進 css 文件便可，徹底沒必要引用 Animate.css。
11. 使用 Meta 標籤進行頁面縮放
<!-- 如下代碼默認設計稿尺寸爲 640 x 1134 -->
<meta id="viewport" content="width=device-width, user-scalable=yes,initial-scale=1" name="viewport" />
<script>
var detectBrowser = function(name) {
if(navigator.userAgent.toLowerCase().indexOf(name) > -1) {
return true;
} else {
return false;
}
};
var width = parseInt(window.screen.width);
var scale = width/640; // 根據設計稿尺寸進行相應修改：640=>?
var userScalable = 'no';
if(detectBrowser("qq/")) userScalable = 'yes';
document.getElementById('viewport').setAttribute(
'content', 'target-densitydpi=device-dpi,width=640,user-scalable='+userScalable+',initial-scale=' + scale); // 這裏也別忘了改：640=>?
</script>
利用 meta 標籤對頁面進行縮放，使得咱們能夠直接根據設計稿來進行頁面的編寫，不用再進行單位的換算等等，省卻了不少麻煩。
12. 微信二維碼問題
01：同一個頁面裏要是有兩個二維碼，長按掃描老是隻能掃出 左側/第一個 二維碼。
解決：可視區域內只能出現一個二維碼。
02：使用 meta 標籤縮放頁面後長按二維碼圖片無反應。
解決：使用瞭如下代碼以後，就能長按識別二維碼了~
<!--同一張二維碼圖片--> <!--下面這張 opacity 爲 0，隱藏起來，可是實際存在，而且寬爲 100%，屏幕有多大就多大--> < img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二維碼圖片地址"> <!--下面這張是呈現給用戶看的--> < img src="二維碼圖片地址" title="qrcode" alt="qrcode"> <!--PS: img 標籤前面的空格記得去掉，這裏加上空格是由於簡書有 bug，針對 img 標籤代碼渲染會出錯-->