Zenn
🐷

タブレットのレスポンシブ対応：PC画面サイズの縮小版を表示する

2025/01/09に公開
CSS
JavaScript
tech

概要

画面幅に基づいて適切なレイアウトを提供する実装方法を解説します。特に以下の2つのケースで、縮小表示を実現します：

  • 小型スマートフォン（412px未満）：412px幅のレイアウトを縮小表示
  • タブレット（744px～1200px未満）：1200px幅のPCレイアウトを縮小表示

コードによる実装

1. viewport設定

(function () {
  var screenWidth = window.screen.width;
  var metaTag = document.createElement('meta');
  metaTag.name = "viewport";

  if (screenWidth < 412) {
    //小型スマートフォン：412px縮小版
    var scale = screenWidth / 412;
    metaTag.content = "width=412, initial-scale=" + scale + ", shrink-to-fit=yes";
  } else if (screenWidth < 744) {
    //通常スマートフォン：レスポンシブ
    metaTag.content = "width=device-width, initial-scale=1.0";
  } else if (screenWidth < 1200) {
    //タブレット：1200px縮小版
    var scale = screenWidth / 1200;
    metaTag.content = "width=1200, initial-scale=" + scale + ", shrink-to-fit=yes";
  } else {
    //PC：レスポンシブ
    metaTag.content = "width=device-width, initial-scale=1.0";
  }
  document.getElementsByTagName('head')[0].appendChild(metaTag);
})();

2. CSS設定

/* 小型スマートフォン：412px縮小版 */
@media screen and (max-width: 411.9px) {
  body {
    min-width: 412px;
  }
}

/* タブレット：1200px縮小版 */
@media (min-width: 744px) and (max-width: 1199.9px) {
  body {
    min-width: 1200px;
  }
}

実装のポイント

  1. UAではなく画面幅での判定

    • より信頼性の高い画面幅（screenWidth）基準で判定
    • Windowsタブレットを含むすべての端末に対応可能
    • 新しいデバイスへの対応も容易

  2. ブレークポイントの設定

    • 412px未満：小型スマートフォン
    • 412px～744px未満：通常スマートフォン
    • 744px～1200px未満：タブレット
    • 1200px以上：PC

  3. 縮小表示の仕組み

    • scale = 実際の画面幅 / 目標の表示幅で縮小率を計算
    • viewportのinitial-scaleで縮小表示を実現
    • bodyのmin-widthで最小幅を保証

メリット

  • デバイスに依存しない柔軟な対応
  • レイアウト崩れの防止
  • 保守性の向上
  • 一貫したユーザー体験の提供

補足：各画面幅での挙動

  • 小型スマートフォン：412px幅のレイアウトを画面に合わせて縮小
  • 通常スマートフォン：通常のレスポンシブ対応
  • タブレット：1200px幅のPCレイアウトを画面に合わせて縮小
  • PC：通常のレスポンシブ対応

この実装により、デバイスの種類に関係なく、画面幅に応じて適切なレイアウトを提供することができます。

※UA判別は避けた方がいいというコメントをいただいたので、UAではなく画面幅での判定で書き直しました。ありがとうございます。

Discussion