移動端H5頁面注意事項

Alessia發表於2017-04-05

原文網址 : https://juejin.im/post/58e4cedc61ff4b006b32c8e5

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 標籤引入，如下：

![](images/qrcode.png)

1	![](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" />

<title>QQ中連結的標題由此處獲取</title>

可參考手機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

程式碼段分享，拿走即用~

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();

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"

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

-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 {