HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

2章. デバイスサイズとブレイクポイントの選定

      2018/02/22   hatano

モバイルのデバイスサイズ

現在、モバイルデバイスはiPhoneをはじめ、様々な種類が登場しています。特にAndoroidは複数のメーカーから多様な画面サイズのデバイスが登場しており、どの画面サイズを基準にするかが重要です。

デバイスサイズに関しては、下記のサイトで確認することができます。

上記のサイトからも分かるようにどのデバイスサイズにするか難しいことが分かります。
ここからは、学習用にデバイスサイズを絞り込んでいきます。
あくまで、学習用にサイズを絞り込んでいるだけですので、案件に応じてサイズは変更してください。

タブレットとスマホ

現在のタブレットは8インチ以上のサイズが多く、PCサイトを表示させても見づらいということは少なくなりました。
また、MicrosoftのSurfaceなどのタブレット型のノートパソコンも普及してきているので、この講座では、タブレットでの表示はPCサイトを使用していきます。

スマホのデバイスサイズの基準

日本に関しては、iPhoneの普及率が60%を超えています。
そのためiPhoneを基準にデバイスサイズの基準を決めていきます。
Appleのモバイルデバイスのサイズに関しては、下記のサイトに詳しくあります。

iPhone/iPad解像度(画面サイズ)早見表
https://qiita.com/tomohisaota/items/f8857d01f328e34fb551

次に主要なデバイスを見ていくと、スマホの最大サイズは iPhone 6+, 6s+, 7+、タブレットの最小サイズは、iPad Miniであることが分かります。

iPhone 6+, 6s+, 7+ 414 × 736px
iPad Mini 768 x 1024px

上記のサイズから736px〜768pxがCSSの切り替える基準になりそうです。
この講座ではiPad Miniの768pxをCSSを切り替えるサイズの基準として解説していきます。
ちなみに、CSSを切り替えるサイズのことを「ブレイクポイント」と言います。

広告

 - レスポンシブサイト制作