iOS Safariで100vhを指定すると、下部にあるメニューバーを含んだ高さになるため、ファーストビューでメニューバー部分にコンテンツが隠れてしまいます。
それを解決するためのJavaScriptが「Viewport Units Buggyfill™」です。
GitHub – rodneyrehm/viewport-units-buggyfill: Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.
上記URLからダウンロードまたは、NPM・Bowerからインストールします。
NPMからインストール
npm install viewport-units-buggyfill
Bowerからインストール
bower install viewport-units-buggyfill
そのまま使う場合は、以下のようにHTML内に記述します。
<script src="viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init();</script>
requireが使える場合は、以下のように記述します。
var viewportUnitsBuggyfill = require('viewport-units-buggyfill');
viewportUnitsBuggyfill.init();
但しこのままだと、Webフォントが使えなくなりますので、CSSを読み込んでいるlinkタグに除外指定を記述。
<link rel="stylesheet" href="{CSSファイル}" data-viewport-units-buggyfill="ignore">