営業の枠から飛び出せ!
営業の枠から飛び出せ!
2019.02.28
#182
それいけ!フロントエンド

iPhone SE/5s/5にもう悩まない!Viewport Extraで手軽に縮小表示

つっちー

こんにちは。フロントエンドエンジニアのつっちーです。

ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。

これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア。かくいう私もiPhone 5sユーザーです(ごめんなさい)。

どうにか解決する方法はないものか……ということで作りました!

Viewport Extra

(6/5 17:00 追記)
おかげさまで、CDNに対して1日約20,000件、公開以来約1,430,000件ものリクエストをいただいております! たくさんのページでご利用いただいているようで嬉しいです。ありがとうございます!

Viewport Extraとは

https://github.com/dsktschy/viewport-extra

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

表示幅が最小幅を下回る画面では、最小幅での表示を比率を維持したまま縮小表示します。言い換えると、meta[name=”viewport”]タグのwidthが最小幅の値に固定されます。

表示幅が最大幅を上回る画面では、最大幅での表示を比率を維持したまま拡大表示します。言い換えると、meta[name=”viewport”]タグのwidthが最大幅の値に固定されます。

たとえば最小幅を375pxに設定しておくと、iPhone 5s(幅320px表示)で、iPhone 8(幅375px表示)での表示がそのまま約85.3%縮小された表示となります。これにより、表示幅が狭くなることによるデザインのくずれを防ぎ、1つのスタイルをより多くの画面幅で使用することが可能となります。

また、meta[name=”viewport”]タグのinitial-scaleの値も同時に書き換えるため、ピッタリと画面にフィットし、余計な横スクロールを発生させません。

Viewport Extraの使い方

使い方は簡単です。

  1. metaタグで通常どおりviewportを指定
  2. scriptタグでViewport Extraを読み込み
  3. scriptタグでViewportExtraオブジェクトをnew
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- scriptタグはmetaタグの直後に設置する -->
<script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.3/dist/viewport-extra.min.js"></script>

<script>
  // 最小幅だけ設定したい場合
  new ViewportExtra(375)

  // 最大幅を設定したい場合
  new ViewportExtra({ minWidth: 360, maxWidth: 414 })
</script>

たったこれだけ!

ポイントは、metaタグの直後にscriptタグを設置すること。これにより縮小、拡大を即時に反映し、HTMLレンダリング後に遅れて縮小、拡大されることを防ぎます。

DEMO

幅375px表示に最適化されたページについて、Viewport Extraを適用しない場合と適用した場合の表示の差を比較してみました。PC版Google Chromeのデベロッパーツールを使い、幅320px表示の端末を再現しています。使用しているHTMLとCSSはこちらです(Viewport Extra適用部分は含んでいません)。

See the Pen
201902
by ligdsktschy (@lig-dsktschy)
on CodePen.

Viewport Extraを適用しない場合

Viewport Extraを適用しない場合
320pxを超えた分の55pxだけ横スクロールが発生してしまい、テキストの右端も見切れてしまっています。

Viewport Extraを適用した場合

Viewport Extraを適用した場合
画面幅320pxにピッタリと収まり、横スクロールが発生しなくなりました!テキストも見切れることなく表示できています。

注意点

  • 一度metaタグの値が書き換えられたあと画面を回転(縦横を変更)しても、metaタグの再書き換えは行いません。これは、画面内容がすべて表示されたあとにmetaタグを書き換えても、環境によっては書き換えが無効となってしまうためです。
  • 最小の高さ、最大の高さを設定する機能は、いまのところ持たせていません。これは、現在どのブラウザでもmeta[name=”viewport”]タグのheight設定が無視されるためです。

    ビューポートの高さを定義します。どのブラウザーでも使用されていません。(MDN

まとめ

小さい端末のシェアがさらに下がるまでの間、あるいは今後またシェアが盛り返したとき、ぜひ使ってみてください。

私もいい加減、iPhone 5sから卒業して、シェア減少に貢献しようかと思います……。ではまた!つっちーでした。

LIGにWeb制作について相談してみる!