iPhone SEでiPhone 6の表示をそのまま縮小表示する方法

こんにちは。

新しいiPhoneが発売されても、まだまだ使用率が高いiPhone SEなどのコンパクトデバイス。
このデバイスサイズを考慮してサイトを作る場合、以下のことに悩まされていませんか？

文字が変なところで改行されてしまう
UIなどの表示が画面外にはみ出てしまう

本記事では、これらの悩みを一瞬で解決する方法を紹介します。

Viewport Extraを使おう
1. 使い方

Viewport Extraを使おう

GitHub - dsktschy/viewport-extra: A liblary to enable to set min-width and max-width to viewport.

A liblary to enable to set min-width and max-width to viewport. - dsktschy/viewport-extra

Viewport Extraはviewport設定を動的に書き換えてくれるライブラリです。

このライブラリで最小幅の値を設定すると、最小幅未満のデバイスサイズの時に、最小幅の時の画面の表示比率を維持したまま縮小表示することができます。

使い方

headタグの中で次の通りviewportを定義し、そのすぐ下にライブラリを読み込みます。

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.2/dist/viewport-extra.min.js"></script>

JavaScriptの書き方は以下です。

<script>
// 最小幅のみ
new ViewportExtra(375);

// 最小幅＆最大幅の場合
new ViewportExtra({ minWidth: 360, maxWidth: 414 });
</script>

これにより、CSSで別途iPhone SEなどの為にブレイクポイントを作らなくても良くなるのでとても楽になりました！