【CSS】PCでもモバイルと同じレイアウトの画面で表示する(スマホのフレーム画像に画面をはめる)

今回やること

PCからみると、スマホの枠の中にコンテンツが表示されるようなデザインの画面を作る。参考サイト(フィッシャーマン・コール)

PCだとこーいう表示になる

モバイルからだとこういう表示になる

メリット

PC用の画面デザインを用意せずに、スマホ用のレイアウト一本でいける

大まかな流れ

1. 表示している端末がPCかモバイルかを判定する
2. (PCの場合)スマホのフレーム画像を表示する
3. (PCの場合)画面をスマホの枠に当てはまるように、指定の高さ、幅で表示する
4. (モバイルの場合)スマホのフレーム画像を表示しない
5. (モバイルの場合)画面をスクリーンいっぱいに表示する

コード

HTMLとCSSを書いていく

メディアクエリを使用する

メディアクエリを使って、画面の幅でPCかモバイルかを判定する

  @media screen and (max-width: 760px) {
     /* 760pxの幅まで適用される(モバイルの時のレイアウト) */
    .frame {
      /* モバイルの時は、スマートフォンのフレーム画像を表示しない */  
      display: none;
    }
  }

  @media screen and (min-width: 760px) {
     /* 幅が760pxより大きい時に適用される(PC用のレイアウト) */
    .frame {
      /* スマホのフレーム画像を上下中央に表示 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 5;
      width: 450px;
      height: 787px;
      .frame-img {
        position: relative;
        margin-top: 20px;
        margin-left: -1.3px;
      }
      /* コンテンツをスマホのフレーム内に収まるように上下中央に表示 */
      .main {
        width: 376px;
        height: 603px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 10;
      }
    }

HTMLはだいたいこんな感じで

<div class="frame">
  <!-- スマホのフレーム画像 -->
  <img alt="" src="./assets/imgs/phone-frame.png" class="frame-img">
</div>
<!-- 表示するコンテンツ -->
<ion-nav class="main" [root]="rootPage"></ion-nav>