レスポンシブデザインでのブレイクポイントの決め方

質問

レスポンシブ・ウェブデザインのサイトを作ろうとしているのですが、ブレイクポイントの決め方で迷走中です。

まず、今現在、
メーカーページの仕様表に出てくるような解像度は、デバイス幅（device-width）とはまったく関係のない要素と考えているのですが、これは間違いないでしょうか。

そうだとすると、ブレイクポイントを決める際に参考にするべきはデバイス幅ということになると思うのですが、それを知る術というのは存在するのでしょうか？

また、あったとしても、すべてのスマホのデバイス幅を調べるのも現実的ではないと思うのですが、一体どのようにしてブレイクポイントを設定すれば良いのでしょうか？

ご存知の方、ご教授いただければ幸いです。
よろしくお願いいたしますm(__)m

回答No.1

ORUKA1951 · ベストアンサー

表示領域の幅です。
　PCでページを見ているとき、ウィンドウ幅を小さくすると切り替わります。

　あまり深刻に考えず、最低この程度の幅までだったらこのデザインでと言う風に考えます。

　あくまで基本はリキッドデザインですよ!!!。リキッドでウィンドウ幅に合わせてスムーズに伸縮し、それで吸収できなくなるであろう幅で切り替えればよいです。

補足

すみません。質問の内容が不明瞭でしたm(__)m
要は、

[1]スマホのメーカーページ仕様表に出てくるような解像度とデバイス幅（device-width）はまったく異なるものなのか？
[2]device-widthの値を知る術はあるのか？
[3]ブレイクポイントを決めるコツは？

ということが聞きたかったのです(^^ゞ

[3]に関しては、ORUKA1951さんの回答で納得しました。

重ねての質問で申し訳ないのですが、[1]と[2]はご存じないでしょうか。
よろしくお願いいたしますm(__)m

回答No.4

神崎 渉瑠（@taloo）

>[1]スマホのメーカーページ仕様表に出てくるような解像度とデバイス幅（device-width）はまったく異なるものなのか？

解像度はディスプレイの解像度です。

device-widthの前に、viewportをデスクトップPCで例えて説明します。

デスクトップPCに21インチ1920 x 1080のディスプレイをつないで、
画面のプロパティで解像度を1680 x 1050ピクセルにすると、

ディスプレイのサイズ：21インチ
ディスプレイの解像度：1920 x 1080
デスクトップのサイズ：1680 x 1050

となります。
このデスクトップのサイズがviewportに相当します。

スマホ/タブレットPCではデスクトップサイズを変更する代わりに、ブラウザウインドウサイズを使って仮想的に変更しています。
width = device-widthにしたときのdevice-widthはこの「画面プロパティの解像度」の"デフォルト値"だと思います。

>[2]device-widthの値を知る術はあるのか？

screen.widthがdevice-width（デスクトップサイズのデフォルト値）になると思います。
※あくまで「思います」です。ブラウザ依存（機種依存）があるかもしれません。

<meta>で指定されたwidthを取得するなら、document.body.clientWidth（margin、border、paddingの影響を受けます）を取得するか、
<meta>要素のcontent属性値の、"width=(数値)"という部分から取得できると思います。

「思います」が多くてすみません。
screen.widthとdevice-width、viewportとの関係は仕様書などに書かれていませんので、JavaScriptで検証した内容からの推測です。
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport-ja/

>[3]ブレイクポイントを決めるコツは？
すみません、ブレイクポイントが何のことかわからないのでお答えできません。

補足

ご丁寧な回答ありがとうございます。
参考になりました。

市場に出回っているスマホやタブレットのdevice-width一覧があればなぁ、とも思っていたのですが、
やはり１つ１つJS等で取得するしかないようですね(^^A

ということは、[3]についてはORUKA1951さんがおっしゃっていた方法なんかがやはり最適みたいです。

回答No.3

神崎 渉瑠（@taloo）

段組みを切り替えるウインドウ幅の決め方、ということですか？

奇麗に見えるサイズでいいんじゃないですかね。
幅320pxの画像なら320px＋マージンの倍数が切り替えに適したサイズでしょうし、
比率指定（ウインドウサイズに応じて縮小）にしてるなら、あまりに小さすぎてない様が読めなくなった時が段組みを切り替えるのに適したサイズという事になると思います。
何ピクセルとか何％という絶対値で、一概に言える物ではないと思います。

補足

う～ん、ちょっと何をおっしゃってるのかがよく分からないでが、
とりあえず、レスポンシブ・ウェブデザインに関しての質問で、

[1]スマホのメーカーページ仕様表に出てくるような解像度とデバイス幅（device-width）はまったく異なるものなのか？
[2]device-widthの値を知る術はあるのか？
[3]ブレイクポイントを決めるコツは？

という内容です。

知識不足のため、説明が分かりづらいとは思いますが、意を組んでいただけたらと思います。

回答No.2

神崎 渉瑠（@taloo）

すみません、ブレイクポイントって何ですか？（何を区切るのですか？）

補足

すみません。それも書いてなかったですね(^^ゞ

PCとタブレットとスマホで区切るつもりです。