meta viewportでピクセル指定をすると、Androidで拡大されて表示される問題

<meta>タグのviewportは、イマドキはwidth=device-width, initial-scale=1のような指定をすると思います。

しかし、案件によってはwidth=350のようにピクセルで指定する時もあります。

その際に、Androidの一部の端末やブラウザで「拡大されて表示される」ことがあります。

この対策方法を紹介します。

対策

<meta name="viewport" content="width=350">

上記のように指定している場合、user-scalable=no, target-densitydpi=device-dpiをcontent属性に追加してあげるだけで解決します。以下のように変更してあげましょう。

<meta name="viewport" content="width=350, user-scalable=no, target-densitydpi=device-dpi">

そもそもviewportにピクセルで指定する時ってどんな時？

私は、画面幅が350px以下を下回る時は、350pxのレイアウトを起点に表示倍率を縮小させるようにしています。

画面幅が350px時点のレイアウト（デザイン）で、画面幅320pxまで対応しようとすると、ほぼレイアウトが崩れてしまいます（文字がはみ出したりする）。

画面幅が小さい端末のシェア率は2~3%程度で、そのために時間をかけてレイアウト調整をするのはいかがなものかと思います（もちろん案件によりけりですが）。

 

この話のイメージが沸かない方はLIGさんの記事を読んでみてください。

参考：iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示

 

私は、JSで画面幅が小さい時は表示倍率を縮小するようにしています。サンプルコードも用意したので、よかったら試してみてください。

サンプルコード

HTML側では、<meta name="viewport" content="width=device-width, initial-scale=1">を定義しておきます。

/**
 * ウィンドウサイズが任意の値を下回ったら、表示比率を縮小する（metaのviewportで調整）
 * 実装イメージ: https://liginc.co.jp/451892
 * @param {Number} _executeWindowWidth 起点とする画面幅
 */
const adjustViewport = _executeWindowWidth => {
  const executeWindowWidth = _executeWindowWidth || 350;
  const elmViewport = document.querySelector('meta[name="viewport"]');
  const valueViewport =
    window.innerWidth < executeWindowWidth
      ? `width=${executeWindowWidth}, user-scalable=no, target-densitydpi=device-dpi`
      : 'width=device-width, initial-scale=1';
  elmViewport.setAttribute('content', valueViewport);
  return;
};

window.addEventListener('DOMContentLoaded', () => {
  adjustViewport();
});

adjustViewport()実行時に引数を指定すると、その数値を起点に表示倍率が変わるようになります。引数を指定しないと350pxで表示倍率が変わります。

// 350pxが起点
adjustViewport();

// 400pxが起点
adjustViewport(400);