ど素人から毛を生やす。<延>

レスポンシブだけどiPadはPCサイト幅980pxで表示したいときのviewport

Web > css 2016年3月22日(最終更新:1年前)

このページは2016.3.22に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

レスポンシブサイトをコーディングするとき、
PCとiPadとスマホでそれぞれブレイクポイントを用意するのが理想です。
が、予算やデザインの関係でiPadはPCサイトを表示にすることも多くあります。

このとき、サイトの幅を980pxにしておいて、
iPadで表示したときブラウザ幅980pxで表示されてくれると横スクロールが発生しない
ので良い。

のですが、このやり方がよくわかっていなかったというか、
僕はつい最近までできると知らなかったわけです。

やり方は、viewportの設定を

<meta name="viewport" content="width=device-width">

にするだけ。
一般的なレスポンシブのviewportだと、
<meta name="viewport" content="width=device-width,initial-scale=1.0">
にすることが多いと思いますが、このinitial-scale(拡大率)の設定を取るだけでした。

で、CSSの方では

body,html{
min-width:980px;
}

PCサイト時のmin-widthを設定しておいて、スマホサイズから@media screenを設定するだけ。

それだけ。

それだけか…。まじか……。 _(:3」∠)_

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (2)
  • (・∀・) 参考になった (5)
  • (`・ω・´) 役に立った (7)