H5 分層螢幕適配

def發表於2018-03-16
H5

轉載請註明出處：hai.li/2018/03/14/…

設計大大，這次真的是 "按設計稿來" 了，因為現在，任何機子都是設計稿標準機！ 開發同學，這下你就直接讀設計稿標註就好了啦！

螢幕適配

螢幕適配應當指內容 適配區 和 螢幕區 間的適配關係。 單屏適配有 contain、cover 或 fill，多屏常見是 依寬 。 contain 和 cover 還需要 定位 來處理留白和超出的內容。 而同一個 H5 裡不同內容往往用不同適配方式，即 分層。

H5 分層螢幕適配

H5 分層螢幕適配

優選 CSS

  • 頁面載入後 js 往往需要延時至少 70ms 才能獲取正確的 webview 寬高
  • css 往往最先執行，且 cssom 的解析往往和 dom 在最開始並行構建
  • js 會等待 dom 和 cssom 處理完後才能執行，而 css 只需等待 dom
  • 相比 js 在切換橫豎屏時要切換 2 次程式來重繪，css 無需切換

對於螢幕適配這類表現問題，能用 css 實現就應該用 css 實現。

整層適配

為確保各層元素同步縮放，不走樣，每層的 適配區 應當等於設計稿大小。 直接的實現就是構造和 適配區 一樣尺寸的 容器， 整層適配。 容器 內可以有若干個相同適配方式的 元素。 以 svg 實現為例：

<!doctype html>
<html>
<body>
<style>
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<!-- fill -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="none"> <!-- 容器 -->
  <rect x="0" y="0" width="1080" height="1920" fill="rgba(96,96,96,.08)"/>  <!-- 元素 -->
</svg>
<!-- contain 居中 -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet"> <!-- 容器 -->
  <rect x="0" y="233" width="1080" height="1407" fill="#1565C0"/>  <!-- 元素 -->
</svg>
<!-- contain 居底 -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMax meet"> <!-- 容器 -->
  <rect x="444" y="1779" width="191" height="39" fill="#1565C0"/>  <!-- 元素 -->
</svg>
</body>
</html>
複製程式碼

實際效果：

H5 分層螢幕適配

整層適配 實現簡單，開發時直接讀取設計稿值，可以滿足大部分靜態頁面需求。 但在 h5 動畫多的時候，就得考慮動畫流暢，頁面效能了。 用可替換元素如 <img> <object> <svg> 等做 容器，以及用背景圖做 元素 的， 在應用 css 動畫時有效能缺陷：

  • 對 容器 內 元素 應用 css 動畫會造成頻繁重排和重繪，導致卡頓。
  • 將和 適配區 尺寸相同的 容器 提升為合成層時所佔記憶體過大，有多少層記憶體就翻多少倍。

為這些實現方案提升效能就要針對 容器 動畫，並減小 容器 的尺寸，最好是和一層裡所有 元素 的最小總面積相等，做到 精簡適配

精簡適配

H5 分層螢幕適配

公式

推導過程見 H5 分層螢幕適配公式推導

設計稿
  寬 v
  高 g
  
適配前元素
  橫座標 x
  縱座標 y
  寬 w
  高 h

適配後容器
  橫座標 x3 = x*u/v
  縱座標 y3 = y*f/g

適配後元素
  橫座標 x4 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1
  縱座標 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1
  寬 w3 = (w/v)*u
  高 h3 = (h/g)*f
  當 contain 方式適配時
    縮放值 s = Math.min(f/g, u/v)
    橫向左留白佔總留白 o = (m*v - x)/w
    縱向上留白佔總留白 p =  (n*g - y)/h
  當 cover 方式適配時
    縮放值 s = Math.max(f/g, u/v)
    橫向左超出佔總超出 o = (x - m*v)/w
    縱向上超出佔總超出 p =  (y - n*g)/h

適配區
  垂直居頂時 m = 0
  垂直居中時 m = .5
  垂直居底時 m = 1 
  水平居左時 n = 0
  水平居中時 n = .5
  水平居右時 n = 1 

相比整層適配記憶體優化 (w3*h3)/(v1*g1) >= w*h/(v*g)
複製程式碼

H5 分層螢幕適配 實現示例

  • 當設 max-width 為 w/v，max-height 為 h/g 時對應 contain 適配。
  • 當設 min-width 為 w/v，min-height 為 h/g 時對應 cover 適配。
  • 當設 width 為 w/v，height 為 h/g 時表示 fill 適配。
  • contain 適配時，如果圖片原始尺寸小於 max-width 和 max-height 時，用 zoom: 10 放大或者直接修改圖片原始尺寸。
  • cover 適配時，如果圖片原始尺寸大於 min-width 和 min-height 時，用 zoom: .1 縮小或者直接修改圖片原始尺寸。
  • 因 top left 中百分比是相對螢幕寬 u 和高 f 的，對應 m*u 和 n*f
  • 因 transform 中百分比是相對適配後元素寬 w1 和高 h1 的，對應 (m*v + x)/w*w1 和 (n*f + y)/h*h1
<!doctype html>
<html>
<body>
<style>
img {
  /* min-width 和 min-height 構成了虛擬的容器 */
  min-width: 50.37037037037037%; /* w3 = (w/v)*u 其中 w = 544，v = 1080 */
  min-height: 7.395833333333333%; /* h3 = (h/g)*f 其中 h = 142，g = 1920 */
  zoom: .1;
  /* x4 = m*u + (x - m*v)/w*w1 */
  /* y4 = n*f + (y - n*g)/h*h1 */
  position: absolute;
  left: 50%; /* m*u 其中 m = .5*/
  top: 50%; /* n*f 其中 n = .5 */
  transform:
    translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277，m = .5，v = 1080，w = 544 */
    translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<img src="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>
複製程式碼

background 實現示例

  • background-size 值為 contain 時對應 contain 適配。
  • background-size 值為 cover 時對應 cover 適配。
  • background-size 值為 100% 100% 時對應 `fill 適配。
  • background-position 百分比和 o p 意義相同
<!doctype html>
<html>
<body>
<style>
div {
  position: absolute;
  width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544，v = 1080 */
  height: 7.395833333333333%; /* h3 = h/g*f 其中 h = 142，g = 1920 */
  background: url(http://ui.qzone.com/544x142) no-repeat; /* 背景圖做元素 */
  background-size: cover;
  left: 25.64814814814815%; /* x3 = x/v*u 其中 x = 277， v = 1080 */
  top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498， g = 1920 */
  background-position-x: -48.34558823529412%; /* o = (x - m*v)/w 其中 m = .5 ， v = 1080，x = 277，w = 544*/
  background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 其中 n = .5 ， g = 1920，y = 1498，h = 142*/
}
</style>
<div></div> <!-- 容器 -->
</body>
</html>
複製程式碼

實現示例

  • preserveAspectRatio 的 meetOrSlice 為 meet 時對應 contain 適配。
  • preserveAspectRatio 的 meetOrSlice 為 slice 時對應 cover 適配。
  • preserveAspectRatio 值為 none 時對應 fill 適配。
  • 這裡 preserveAspectRatio 的 meetOrSlice 相對的是容器，不是 適配區 這裡用 transform 來定位，而 preserveAspectRatio 的 meetOrSlice 固定為 xMinYMin。
<!doctype html>
<html>
<body>
<style>
svg {
  position: absolute;
  width: 50.37037037037037%;
  height: 7.395833333333333%;
  /* x4 = m*v/w*w3 + (x - m*v)/w*w1 */
  /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */
  top: 0;
  left: 0;
  transform:
    translateX(99.26470588235294%) /* m*v/w*w3 其中 m = .5，v = 1080，w = 544 */
    translateY(676.056338028169%); /* n*g/h*h3 其中 n = .5，g = 1920，h = 142 */
    overflow: visible;
}
svg image {
  transform:
    translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277，m = .5，v = 1080，w = 544 */
    translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> <!-- 容器 -->
  <image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</svg>
</body>
</html>
複製程式碼

輔助工具

手動計算百分比及寫 css 很麻煩，可以藉助 sass 等工具來輔助簡化。 設計稿寬 v 高 g 一般是頁面級常量。 只需讀取設計稿裡每個 元素 的橫座標 x 、縱座標 y 、寬 w 和 高 h，然後工具生成 css 即可。 這下媽媽再也不用擔心我還原問題、螢幕適配問題了。

文書處理

  • 文字固定或單行不固定，svg 的 text 標籤可以處理
  • 文字固定或單行不固定還可以將文字轉為圖片
  • 文字多行不固定，可以藉助 svg 的 foreignObject 嵌入普通 div

方案對比

螢幕適配方案非常多，選哪種方式實現 整層適配 或 精簡適配，下面是對比

方案 縮放 定位 文字縮放 相容
padding-top 百分比 只能依寬 ✓ ✗ ✓
viewport ✓ ✗ ✓ 支援情況複雜
object-fit ✓ ✓ ✗ 移動端 android 4.4.4+
svg preserveRatio ✓ ✓ ✓ 移動端 android 3.0+
(max/min)-(width/height) ✓ ✓ 固定文字 ✓
background-size ✓ ✓ 文字轉圖片 ✓

相關文章