# ios 100vh
ios行動裝置的100vh包含 **address bar(網址列) & toolbar(底部工具列)**
並不會跟andorid裝置一樣，依據工具列的收放而變動高度
(藍字應為ios & android，圖片來源: https://ithelp.ithome.com.tw/articles/10249090)

## 解法(對應參考資料)

### 建議. dv-前綴
使用 dvh,dvw 動態 viewport 單位
目前**不支援 chrome**

.full-height {
    height: 100vh;
    height: 100dvh;
}

參考: https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/

### A. [jquery.documentsize](https://github.com/hashchange/jquery.documentsize)
可不依附jQuery

// 取扣除工具列後的高度
$.windowHeight( "visual" )

// 放在resize中監聽
$(window).on('resize', function(){
  var viewportHeight = $.windowHeight( "visual" )
})

### ~~動態設定css變數~~ 棄用
缺點是某些瀏覽器不支援css變數
css:

.full-height {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

js:

// 搭配 resize 達到動態調整
window.addEventListener('resize', () => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

### 3. ~~css 屬性 fill-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;

## 建議

在設計版面的時候避免模仿app介面設置底部工具列(如下圖)
一方面瀏覽器工具列會壓縮版面，另一方面也會因裝置介面不同導致操作困難

參考文章與圖片來源：[iPhone X Web Navigation Concept](https://medium.muz.li/iphone-x-web-navigation-concept-c06efc0e0c50)

## 參考資料
1. [Mobile Safari $(window).height() URL bar discrepancy](https://stackoverflow.com/a/31655549)
2. [The trick to viewport units on mobile](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/)
3. [~~Mobile view height的通透世界~~](https://medium.com/@littleDog/mobile-view-height%E7%9A%84%E9%80%9A%E9%80%8F%E4%B8%96%E7%95%8C-b896ac234ba9)