Mobile view height的通透世界

狗狗
狗狗
Nov 7 · 3 min read

在mobile網頁開發時,view height一直是令人煩惱的議題,mobile browser上的navigation跟toolbar很巧妙的遮擋了可視範圍,以前能在container上用height: 100vh做解決,但在手機iOS跟Chrome app更新後這世界一切都變了,height: 100vh再也無法解決我們想解決的問題,花了點時間才找到解法,特別做個紀錄。


直接說結論

100vhfill-available取代:

// For Edge
height: 100%;
// WebKit-based browsers will ignore this
height: -moz-available;
// Mozilla-based browsers will ignore this.
height: -webkit-fill-available;
// For WebKit-based browsers, Edge not support this
height: fill-available;

就這麼簡單!

這個做法在iOS Chrome, iOS Safari, Android Chrome, desktop Chrome, desktop Safari上實際測試過view height都能符合原預期。

有興趣可以去看看fill-available在各platform/browser的支援度


狗狗

Written by

狗狗

前端工程師 | 對前端開發充滿熱情,在前端打滾了六年,決定開始將開發時遇到的問題及踩到的雷記錄下來,擅長網頁跨platform及browser的問題處理