iOSブラウザのATF表示時にアドレスバーまで考慮して高さを調節するJavaScript

/**
 * iOSブラウザのATF表示時にアドレスバーまで考慮して高さを調節する関数
 * HTMLにインラインスタイルでheightを追加
 */
const atfAdjustHeight = () => {
  // class名を指定 ※. (ドット) を忘れずに
  const element = '.js-atf_adjustheight'
  document.querySelector(element).style.height = window.innerHeight + 'px'
}

atfAdjustHeight()

.classname {
  height: var(--browser-height);
}

/**
 * iOSブラウザのATF表示時にアドレスバーまで考慮して高さを調節する関数
 * CSSカスタムプロパティで追加
 */
const cssAddBrowserHeight = () => {
  const browserHeight = window.innerHeight
  document.documentElement.style.setProperty('--browser-height', browserHeight + 'px')
}

cssAddBrowserHeight()