Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS3] Target a specific device – デバイスごとのディスプレイサイズとメディアクエリーの一覧

  • Pocket
  • このエントリーをはてなブックマークに追加

メジャーなスマートフォンとタブレットのディスプレイサイズと、それ用にサイトを制作する際のメディアクエリーが一覧で紹介されてます。スマートフォンは各種iPhoneやHTC One、サムスン製ののものなど、タブレットは各種iPadやNesusなどの、いわゆるグローバルモデルとして代表的なデバイスが揃ってます(国産が1つもない・・・)。Device Widthは実際のドット数ではなく、ピクセル指定した際のブラウザ内の横幅が掲載されていて、実際のドット数はPixel ratioをかければ分かるようになってます。Show queryをクリックすると、そのデバイス用のメディアクエリが表示されるので、ブレイクポイント決める際の参考になりますね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください