Preface

最近發現在 safari mobile 上面展開一個 position: fixed; height: 80vh; 的 panel,
和其他瀏覽器相比, 高度明顯高於 80vh

這是在 chrome mobile 的畫面

這是 safari mobile (no address bar)

safari mobile (with address bar)

估狗了一下發現這是很多人都會遇到的問題

其實一張圖就可以完美詮釋這個問題

並且 Apple Safari Team 針對這個問題, 帥氣的回覆了：

It’s not a bug, it’s a feature.

好吧 既然是個 feature, 我們就來實做一個 feature

Try to solve

如果是為了 height: 100vh;

有一個非常單純的解法 height: -webkit-fill-available;

update: chrome v84以後 似乎已經不支援 -webkit-fill-available

如果不是 100vh 可以使用以下 css variables 的解法

css:

:root {
  --vh: 1vh;
}

function setCorrectViewHeight() {
  const windowsVH = window.innerHeight / 100
  document.documentElement.style.setProperty('--vh', windowsVH + 'px')
}

export default function safariHacks() {
  setCorrectViewHeight()
  window.addEventListener('resize', setCorrectViewHeight)
}

在適當的時候 import 這兩支 css 和 js 既可

然後在需要用到 vh 的時候這樣用就可以了

max-height: 80vh;
max-height: calc(var(--vh) * 80);

完成！

Reference Articles

• Addressing the iOS Address Bar in 100vh Layouts

• CSS3 100vh not constant in mobile browser