CSS3 Media Queriesのブレイクポイントはどこが良いのか

CSS

最近はレスポンシブのサイトが一般的になってきたと思います。そのサイトではCSS3 Media Queriesを使って表示を切り替えると思いますが、これのブレイクポイントはどこが良いのかなというので調べてみました。

どう分けるか

このブレイクポイントは対象の端末によってバラバラにはなりますが、私がやることの多い、

  • 「スマートフォン表示」と「デスクトップ表示」の2種類に分ける

ということで調べてみました。

ちなみに今まで(iPhone5シリーズ基準)は640pxでブレイクポイントを設定することが多かったですがそれは、640pxにした理由は縦横どちらで見てもスマートフォン表示となるからです。また、Androidはサイズが多様なので基本的にはiPhoneを基準に考えています。

iPhone6の解像度

iPhone6シリーズから実質解像度が、

  • iPhone 6 : 667px × 375px
  • iPhone 6 Plus : 736px × 414px

となり今までのブレイクポイントでiPhoneを横に持つとデスクトップ表示になってしまいます。

参考

Bootstrapのブレイクポイント

これだけ画面が広ければデスクトップ表示でもよい気もしますが、やはりスマホはスマートフォン表示が良いかなと思ったので今はブレイクポイントは何pxが多いのか参考としてHTMLテンプレートのBootstrapを見てみました。

参考

Bootstrapのブレイクポイントとしては

  • 768pxまでスマートフォン表示
  • 992pxまでタブレット表示
  • 1200pxまで小さめデスクトップ表示
  • それ以上は大きいデスクトップ表示

となっているみたいです。

ブレイクポイントは768pxにしてみる

今回はスマートフォンへのブレイクポイントを決めたかったので、iPhoneの解像度やBootstrap・iPadの実質解像度を参考にすると768pxでいいのかなと思います。

768pxにするとiPhone 6 Plusで縦でも横でもスマートフォン表示になり、ipadの実質解像度が1,024px × 768pxなのでiPadでは縦でも横でもデスクトップ表示になります。ダブレットの最低幅より小さい解像度は全部スマートフォン表示という感じですね。

今後出る機種でまた変わっていくと思いますが、ひとまずブレイクポイントは768pxがいいのかなという結論でした。