微信十人牛牛房卡html5實現分層螢幕適配
螢幕適配
螢幕適配應當指內容 適配區 和 螢幕區 間的適配關係。
單屏適配有 contain、cover 或 fill，多屏常見是 依寬 。
contain 和 cover 還需要 定位 來處理留白和超出的內容。
而同一個 H5 裡不同內容往往用不同適配方式，即 分層。
優選CSS
頁面載入後 js 往往需要延時至少 70ms 才能獲取正確的 webview 寬高
css 往往最先執行，且 cssom 的解析往往和 dom 在最開始並行構建
js 會等待 dom 和 cssom 處理完後才能執行，而 css 只需等待 dom
相比 js 微信十人牛牛房卡出售(h5.hxforum.com) 企鵝 2952777280
微信 Tel17061863533
在切換橫豎屏時要切換 2 次程序來重繪，css 無需切換
對於螢幕適配這類表現問題，能用 css 實現就應該用 css 實現。
整層適配
為確保各層元素同步縮放，不走樣，每層的 適配區 應當等於設計稿大小。
直接的實現就是構造和 適配區 一樣尺寸的 容器， 整層適配。
容器 內可以有若干個相同適配方式的 元素。
以 svg 實現為例：
| 1234567891011121314151617181920212223242526 | <!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 動畫多的時候，就得考慮動畫流暢，頁面效能了。
用可替換元素如 <img> <object> <svg> 等做 容器，以及用背景圖做 元素 的，
在應用 css 動畫時有效能缺陷：
對 容器 內 元素 應用 css 動畫會造成頻繁重排和重繪，導致卡頓。
將和 適配區 尺寸相同的 容器 提升為合成層時所佔記憶體過大，有多少層記憶體就翻多少倍。
為這些實現方案提升效能就要針對 容器 動畫，並減小 容器 的尺寸，最好是和一層裡所有 元素 的最小總面積相等，做到 精簡適配
精簡適配
公式
推導過程見 H5 分層螢幕適配公式推導
| 12345678910111213141516171819202122232425262728293031323334353637 | 設計稿寬 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
|