何が問題なのか
スマホ向けデザインカンプは375px幅で共有されることが多い。
問題になるのが 320px表示の端末（iPhone SE初代・iPhone 5s / 5 など）。
375pxで最適化したレイアウトを320pxで表示すると、55px分はみ出して横スクロールが発生したり、テキストが見切れたりする。
これを解決するのが viewport-extra というライブラリ。
viewportのmetaタグをJSで書き換えることで、ページ全体を比率を保ったまま縮小表示してくれる。
使い方
CDN
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport-extra" content="min-width=375">
<script async src="https://cdn.jsdelivr.net/npm/viewport-extra@2.4.0/dist/iife/viewport-extra.min.js"></script>
npm
npm i viewport-extra
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport-extra" content="min-width=375">
import 'viewport-extra'
min-width に設定した値より狭い画面では、その幅で表示した内容をそのまま縮小して表示する。
320px端末に min-width=375 を設定した場合、375px表示を約85%縮小した状態で表示される。
どちらの方法でも動作は同じ。外部スクリプトを気軽に追加したいならCDN、プロジェクトにパッケージ管理が導入されているならnpmを選ぶとよい。
ポイント
パフォーマンスへの影響はほぼない
async 属性により非同期で読み込まれるのでレンダリングをブロックしない。ライブラリのサイズも1KB未満。また、375px以上の端末では条件に引っかからず即終了するだけなので、対象外の端末が遅くなることもない。
2026年でも現役
v2.4.0が2026年3月末ごろリリースされており、現在もメンテナンスが続いている。
また、代替手段も意外とない。svh / lvh / dvh などの新しいCSS viewport単位はモバイルのアドレスバー問題を解決するものであり、viewport-extraが行う「ページ全体を縮小する」処理とは別物。
viewportのmetaタグを動的に書き換えてスケールする処理はCSSだけではまだ実現できず、npm上で同等の機能を持つライブラリも見当たらない。
320px端末のシェアは下がっている
iPhone SE は2nd gen（2020年）以降ビューポート幅が375pxになっており、今の国内iPhoneユーザーが320px端末を使っているケースはほぼない。「念のため」程度の温度感で入れておくのがちょうどいい。
まとめ
- 375px最適化サイトが320px端末で崩れる問題をHTMLへの3行追加で解決できる
- パフォーマンスへの影響はほぼなし
- 320px端末のシェア自体は減少しているが、ライブラリは現役でメンテナンスされている
参考
他におすすめの方法がありましたら、ぜひ！コメントで教えてください！
自分もよく使ってる！という方も、いいね、コメントなどで肯定していただけると筆者が安心します。