# 【iPad・SE対応】Viewport Extraで手軽に縮小表示

> Viewport Extraを使用して、iPadやSEなどさまざまなデバイスに対応したレスポンシブデザインを簡単に実現する方法を紹介します。最小幅と最大幅の設定により、デザインの崩れを防ぎ、余計な横スクロールを避けることができます。

- 公開日: 2025-04-03
- 著者: Matsu
- タグ: レスポンシブ
- URL: https://tech.anycloud.co.jp/articles/viewport-extra

---

webフロントの実装において、近年さまざまなデバイスに対応する必要がありますよね。

「SEだと崩れている・・・」「iPadだけ崩れている・・・」

「SEのために調整したら別デバイスでズレた・・・」とかもあったりします。

こんなことは日常的に起こりますし、それを細かく修正するのも正直面倒です。

iPad、iPad Air、iPad Pro、iPhone SE、iPhone ProMax….

端末サイズバラバラすぎ！

そんな苛立ちと悩みを解決すべくViewport Extraの紹介です。

## Viewport Extraで何ができるか？

[https://github.com/dsktschy/viewport-extra#viewport-extra-](https://github.com/dsktschy/viewport-extra#viewport-extra-)

Viewport Extraは、metaタグを書き換えることにより、viewportの最小幅設定、最大幅設定することができます。

たとえば、最小幅を414pxに設定しておくと、iPhone SE（幅375px表示）で、iPhoneX（幅414px表示）での表示がそのまま約90%縮小された表示となります。

つまり、表示幅が狭くなることによるデザインのくずれを防ぎ、1つのスタイルをより多くの画面幅で使用することが可能となり、余計な横スクロールを発生を防いでくれます。

## **Viewport Extraを適用しない場合**

幅414px表示に最適化されたページで、Viewport Extraを適用しない場合は以下のように横スクロールが発生します。

（もし横スクロールにならないようにしてもフォントサイズなどは414px基準なので375のサイズで見たときに改行の位置や大きさが変になります）

<figure><img src="./image-001.gif" alt="Viewport Extraを適用しない場合" width="1162" height="1550"></figure>

## **Viewport Extraを適用した場合**

[https://www.jsdelivr.com/package/npm/viewport-extra](https://www.jsdelivr.com/package/npm/viewport-extra)

画面幅414pxに収まり、横スクロールが発生しなくなりました。

<figure><img src="./image-002.webp" alt="Viewport Extraを適用した場合" width="1166" height="1526"></figure>

## その他にできる応用的な使い方

以下に様々なデバイスの対応方法も書かれているのでぜひ参考にしてみてください。

[https://github.com/dsktschy/viewport-extra#recipes](https://github.com/dsktschy/viewport-extra#recipes)

## まとめ

いかがでしたか？

画面サイズに依存せずにフロントを構築する際には非常に便利ですね。

端末サイズに困ったら、ぜひ一度使ってみてください。