テクノロジー

iOSのSafariで100vhをいい具合に調整してくれるJavaScript

Tags:
Written by Kishimoto

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">

株式会社MIRAIでは、Webマーケティング・コンサルティングから
ホームページ制作・動画制作など、様々なご相談を承っております。

お仕事のご依頼・ご相談はこちら