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だったり、任意のタイミングに設定するとよい。