H5頁面注意事項

來源：懂視網責編：小采時間：2020-11-27 15:33:50

H5頁面注意事項

H5頁面注意事項:1. 單個頁面內容不能過多設計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂部信號欄的高度。移動端H5活動頁面常常需要能夠分享到各種社交App中，常用的有微信、QQ 等。使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部http://www.gxl

推薦度：

點擊下載本文 文檔為doc格式

導讀H5頁面注意事項:1. 單個頁面內容不能過多設計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂部信號欄的高度。移動端H5活動頁面常常需要能夠分享到各種社交App中，常用的有微信、QQ 等。使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部http://www.gxl

分享下我的失敗嘗試：

如果對整個頁面進行縮放（使用 meta 標簽），按照設計稿的比例，在高度滿足的情況下寬度會偏小，兩邊會有白底；
就算使用 rem 作為相關間距的單位，也沒有辦法找到一個合適的比例在兩種高度（微信/QQ）下切換，因此統一調成適配 QQ 的，這樣就算在微信下有多余的空白，固定底部的引導下滑箭頭也能使其不會過于突兀。

750*1334 頁面示例

2. 標題簡短

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

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

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

代碼示例.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 里壓縮一下看看。

在線的 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 標簽代碼渲染會出錯-->

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com