H5 頁面適配幾種展示形式

一、contain 模式：之內容中心爲基點按照視覺稿的寬高比縮放以適配窗口顯示全頁面內容，窗口與內容的寬度比或高度比之間較小者縮放填滿窗口，當窗口寬高比和視覺稿不一樣時，另外一方向的兩側出現留空部分。

二、cover 模式：之內容中心爲基點按照窗口的寬高比等比縮放以適配窗口，窗口與內容的寬度比或高度比之間較大者縮放填滿窗口，當窗口寬高比和視覺稿不一樣時，另外一方向的兩側超出窗口被裁剪，這種模式不會出現「contain 模式」的留空部分狀況。

三、fill 模式：之內容中心爲基點頁面拉伸填充滿整個窗口以適配窗口，當窗口寬高比和視覺稿不一樣時，內容必定程度上被拉伸

四、scale-width 模式：頁面橫向縮放填充滿窗口，縱向按視覺稿的寬高比放大。出來的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。

五、scale-height 模式：頁面縱向縮放填充滿窗口，橫向按視覺稿的寬高比放大。出來的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。

下面分別來介紹我在項目中的對於適配的思考和選擇以及實現方法。

在作適配以前，首先要和設計師定義好頁面的寬高比，即設計稿的分辨率大小，由於活動主要是經過微信進行傳播推廣，因此這裏我使用的是 iphone5/5s 機型微信瀏覽器窗口分辨率 640*1008。選擇這個分辨率主要出於如下 2 點綜合考慮:

1. 客戶端分辨率佔比數。根據友盟和騰訊雲運營活動近幾個月的數據統計，iphone5/5s 640*1136 這個分辨率是 Ios 平臺佔比最多的，同時太高的分辨率對低端機型是一種浪費，須要花額外多的流量來下載這些資源；
2. 同寬高比尺寸的平臺佔比數。一樣尺寸比的 Android 平臺分辨率 720*1280 和 1080*1920 佔比數也是最多的。

拿最近作的項目舉例，該 H5 頁面基本可歸類爲如下 4 種內容類型：

一、填充滿窗口的層，好比背景幕布（圖1）。

圖1

這種層實現最簡單，採用「fill 模式」適配形式。實現效果核心代碼以下：

圖1 中的圖片適配處理，採用「cover 模式」適配形式。實現效果核心代碼以下：

二、同時基於水平方向和垂直方向居中的層，好比頁面正文內容部分（圖2）。

圖2

像這種層背景色是純色或透明，「contain 模式」是最佳選擇可在任何分辨率窗口顯示全頁面內容，出現留空部分的顏色能夠經過添加一個寬高 100% 的層設置背景屬性來修補。實現效果代碼以下：

三、填充滿整個窗口且邊緣不是純色的層，好比（圖3）。

圖3

「cover 模式」和「fill 模式」能夠做爲選擇。從易用性看，「fill 模式」能夠精確適應窗口區域，但從視覺體驗上看，寬高不等比例的拉伸會形成圖片失真，同時該層的主要內容及交互操做集中在中部，不重要的邊緣能夠適當被裁 剪，故這裏選擇「cover 模式」來作適配會更好，實現效果代碼同上面示例基本同樣，區別在於縮放比處，代碼以下：

四、大於屏幕的層，可實現跟隨手勢移動場景畫面，好比（圖4）。

圖4

「scale-width 模式」和「scale-height 模式」適合運用在這類場景，（圖4）是橫向左右移動層，故這裏選用「scale-height 模式」適配形式。實現效果代碼以下：

這裏寬高等比縮放使用方法除了 transform:scale(x,y)，也能夠使用 zoom 進行縮放，視實際場景需求選擇合適的方法，二者主要不一樣是：

1. zoom 的基點不能自定義，固定是左上角 (0,0)；
2. transform:scale(x,y) 縮放轉換後仍佔據原始空間大小，zoom 縮放轉換後佔據空間等於縮放後的大小。

還有一些複雜的層，但無外乎均可以拆分紅以上幾種類型層，將內容分層出來，每一個層根據內容形式選用相應的適配模式進行縮放。

總結

一、高效適配的核心思想是「縮放」。

二、每一種適配模式都不是絕對的，須要根據需求場景選用合適的形式。適配前先跟設計師溝通明確適配表現形式，遇到複雜的場景能夠把內容拆分出來區分適配。當頁面內容不適合方向旋轉展現，此時就不要無腦適配，有兩個方式能夠選擇：

1. 找設計師出一版另外一方向的響應式設計稿而後製做成響應式頁面；
2. 出現提示方式讓用戶旋轉回支持的方向，好比（圖5）。

圖5

三、須要設定窗口等於設備物理寬度，即 viewport 爲 width=device-width, initial-scale=1。

四、適配相關的 js 放在 head 裏，文檔結構加載完成就先執行適配 js，給 body 加一個顯隱動畫規避在 js 未執行完成時頁面出現縮放先後，顯隱動畫相關代碼以下：