macOSの場合、デフォルトではブラウザのスクロールバーは表示されない（設定で調整可能）。
一方WindowsOSではスクロールバーはデフォルトで表示されるようになっている。
この違いはCSSのvw・vhプロパティに影響し、100vwは縦スクロールバーを含んだサイズ、100vhは横スクロールバーを含んだサイズとなる。
これに対応する場合のもっともシンプルな方法は、CSSカスタムプロパティを使用してCSS指定したうえで、そのカスタムプロパティをJavaScriptで動的に設定することだ。
たとえば、100vwを適切に扱いたい場合、下記のように実装するとよい。
<style>
:root {
--scrollbar: 0;
}
.hoge {
width: calc(100vw - var(--scrollbar, 0));
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.documentElement.style.setProperty('--scrollbar', `${ window.innerWidth - document.documentElement.clientWidth }px`);
});
</script>100vhの場合はスクロールバーよりも、iOS Safari（Google Chrome含めたiOSでインストールできるブラウザはすべてSafariベースのWebViewを使っているため、iOSのブラウザすべて）のアドレスバーを考慮することが多い。
その場合は、-webkit-fill-availableを使用すると100vhで適切な画面分の大きさを取得できるようになる。
<style>
html{
height: -webkit-fill-available;
}
body{
min-height: 100vh;
min-height: -webkit-fill-available;
}
</style>ただし安定しないことも多く、下記のようにJavaScriptで取る方法も場合によっては検討する。
<style>
:root {
--vh-unit: 1vh;
}
.hero {
min-height: calc(var(--vh-unit, 1vh) * 100);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.documentElement.style.setProperty('--vh-unit', `${window.innerHeight * 0.01}px`);
});
</script>いずれの設定もDOMContentLoadedのタイミングに設定しているが、window.loadだったり、resizeだったり、任意のタイミングに設定するとよい。