[筆記] iOS Safari 對於 100vh 的解讀和調整 @地瓜大的飛翔旅程

章節連結

內容
程式碼
參考資料

在桌機版常會使用的 100vh 來先給予一個滿版高度，不過這樣的寫法遇上 iOS 的 Safari 瀏覽器就會踩進一個知名的 feature ( Bug? ) – CSS3 100vh not constant in mobile browser。這邊筆記下可能的解法。

內容

1. Safari 在解讀 100vh 時，將「網址列、內容和手機功能列」都納入寬度，而 Android 系統不會有此狀況
2. 若你改用 100% 可解決此問題，不過 div 內容要小心高度會因為浮動而沒辦法被外層抓取

程式碼

1. css variables + js

<div class="header">
</div>

.hero {
  min-height: 100vh; /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}

let vw = window.innerWidth;

const setFillHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', ()=>{
  if (vw === window.innerWidth) {
    return;
  }

  vw = window.innerWidth;
  setFillHeight();
});

setFillHeight();

</div>

.hero {

min-height: 100vh; /* Fallback */

min-height: calc(var(--vh, 1vh) * 100);

}

let vw = window.innerWidth;

const setFillHeight = () => {

const vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);

}

window.addEventListener('resize', ()=>{

if (vw === window.innerWidth) {

return;

}

vw = window.innerWidth;

setFillHeight();

});

setFillHeight();

2. pure css

height: 100vh;
max-height: -webkit-fill-available;

參考資料

1. CSS3 100vh not constant in mobile browser
2. 實務踩坑恨 – Safari 就是跟別人不一樣之 100% 與 100vh
3. 解決高度100vh在safari手機上的問題
4. iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

按讚加入粉絲團

內容

程式碼

參考資料

延伸閱讀