Avoid blocking by navigation menu on mobile device

[2021-09-17 更新]

vh 在 mobile device 上面會有些問題，如果採用 % 不會有問題。參考資料：

• Avoid 100vh On Mobile Web
• HTML vs Body: How to Set Width and Height for Full Page Size

[原文]

在 mobile device 上，當我們打開瀏覽器的時候，上下通常會出現 navigation menu，隨著我們開始滑動頁面，這個 menu 就會自動消失。

當我們在設定內容大小的時候，通常以 100vh 來確定內容高度為畫面的高度，在 desktop 通常沒有問題，不過在 mobile device 上，100vh 為「初始」的畫面高度，然而當 navigation menu 出現之後，並不會重新計算 vh 值，導致最下方的內容被 navigation menu 給遮蓋住

有一個解決方式是

1. 動態偵測畫面高度

   window.innerHeight
   

2. 將偵測到的高度，賦予一個 css 變數 --vh

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

3. 在 css 當中，利用變數 --vh 來動態調整高度

   height: var(--vh);
   

即可讓內容在 mobile device 當中，不會被 naviagtion menu 給遮擋住

--
Ref:

• The trick to viewport units on mobile
• 深入理解 CSS 變數 ( CSS Variables )