Safari(iOS) で 100vh が正しいサイズを返さない問題の対処法

nbeppu 68views 更新:2017年10月17日

iOS の Safari は ViewPort の相対単位(vh/vh/vmin/vmax)には他のブラウザと異なる挙動があり、100vh を指定するとアドレスバーの高さを含んだサイズを返してしまう問題があります。

以下のJavaScriptを導入することにより解決ができます。
https://github.com/rodneyrehm/viewport-units-buggyfill

npm i viewport-units-buggyfill --save
import * as viewportUnitsBuggyfill from 'viewport-units-buggyfill';

viewportUnitsBuggyfill.init();
window.addEventListener('resize', viewportUnitsBuggyfill.refresh, true);

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません