Viewport Extraは、幅の狭いスマホでもはみ出したりレイアウトが崩れないように、ページ全体を縮小表示することができるJavaScriptライブラリです。
スマホ用のデザインは横幅375pxや412pxで作成されることも多いですが、そのままのフォントサイズだと幅の狭いスマホでは意図しないところで段落ちしたり、横にはみ出してしまうことがあります。
小さいサイズのデバイス用にCSSを調整するのも良いですが、Viewport Extraを使えばページ全体を縮小表示してくれるのでレイアウト崩れを心配する必要がなくなります。
Viewport Extraの使い方
Viewport Extraの使い方は非常に簡単です。下記の3行をHTMLの<head>内で指定するだけです。
<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.5.0/dist/iife/viewport-extra.min.js"></script>viewport-extraで”min-width=375″を指定することで、375px未満のデバイスではviewportの値が書き換えられてぴったり収まるようになる、という仕組みです。
例えば、横幅320pxのブラウザで見ると、以下のようにviewportの値が書き換えられます。
<meta name="viewport" content="initial-scale=0.8533333333333334,width=375">viewport-extraの値は環境に合わせて適宜変更してください。min-widthではなくmax-widthでの指定も可能です。
あとがき
CDNからライブラリを読み込むだけなので楽で良いですね。
詳しい使用方法については、GitHubをご参照ください。