レスポンシブ・ウェブデザインのサイトを作ろうとしているのですが、ブレイクポイントの決め方で迷走中です。
まず、今現在、
メーカーページの仕様表に出てくるような解像度は、デバイス幅(device-width)とはまったく関係のない要素と考えているのですが、これは間違いないでしょうか。
そうだとすると、ブレイクポイントを決める際に参考にするべきはデバイス幅ということになると思うのですが、それを知る術というのは存在するのでしょうか?
また、あったとしても、すべてのスマホのデバイス幅を調べるのも現実的ではないと思うのですが、一体どのようにしてブレイクポイントを設定すれば良いのでしょうか?
ご存知の方、ご教授いただければ幸いです。
よろしくお願いいたしますm(__)m
No.1ベストアンサー
- 回答日時:
表示領域の幅です。
PCでページを見ているとき、ウィンドウ幅を小さくすると切り替わります。
あまり深刻に考えず、最低この程度の幅までだったらこのデザインでと言う風に考えます。
あくまで基本はリキッドデザインですよ!!!。リキッドでウィンドウ幅に合わせてスムーズに伸縮し、それで吸収できなくなるであろう幅で切り替えればよいです。
この回答への補足
すみません。質問の内容が不明瞭でしたm(__)m
要は、
[1]スマホのメーカーページ仕様表に出てくるような解像度とデバイス幅(device-width)はまったく異なるものなのか?
[2]device-widthの値を知る術はあるのか?
[3]ブレイクポイントを決めるコツは?
ということが聞きたかったのです(^^ゞ
[3]に関しては、ORUKA1951さんの回答で納得しました。
重ねての質問で申し訳ないのですが、[1]と[2]はご存じないでしょうか。
よろしくお願いいたしますm(__)m
No.2
- 回答日時:
すみません、ブレイクポイントって何ですか?(何を区切るのですか?)
No.3
- 回答日時:
段組みを切り替えるウインドウ幅の決め方、ということですか?
奇麗に見えるサイズでいいんじゃないですかね。
幅320pxの画像なら320px+マージンの倍数が切り替えに適したサイズでしょうし、
比率指定(ウインドウサイズに応じて縮小)にしてるなら、あまりに小さすぎてない様が読めなくなった時が段組みを切り替えるのに適したサイズという事になると思います。
何ピクセルとか何%という絶対値で、一概に言える物ではないと思います。
この回答への補足
う~ん、ちょっと何をおっしゃってるのかがよく分からないでが、
とりあえず、レスポンシブ・ウェブデザインに関しての質問で、
[1]スマホのメーカーページ仕様表に出てくるような解像度とデバイス幅(device-width)はまったく異なるものなのか?
[2]device-widthの値を知る術はあるのか?
[3]ブレイクポイントを決めるコツは?
という内容です。
知識不足のため、説明が分かりづらいとは思いますが、意を組んでいただけたらと思います。
No.4
- 回答日時:
>[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/#docu …
http://dev.opera.com/articles/view/an-introducti …
>[3]ブレイクポイントを決めるコツは?
すみません、ブレイクポイントが何のことかわからないのでお答えできません。
この回答への補足
ご丁寧な回答ありがとうございます。
参考になりました。
市場に出回っているスマホやタブレットのdevice-width一覧があればなぁ、とも思っていたのですが、
やはり1つ1つJS等で取得するしかないようですね(^^A
ということは、[3]についてはORUKA1951さんがおっしゃっていた方法なんかがやはり最適みたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Android(アンドロイド) MacroDroidでUSB設定の変更がしたいです。 AQUOS SENSE4 Basic を使用し 1 2022/07/30 11:20
- 減税・節税 NTTグループ企業が従業員給与の一部をDポイント払いにした場合、、、、 9 2023/08/26 15:48
- タレント・お笑い芸人 今後ブレイクしそうなお笑い芸人を教えてください 現在ブレイクしているけど、今後もっと露出な増えそうな 8 2022/10/10 07:43
- クレジットカード ENEOSでのdポイントについて 3 2022/05/27 23:09
- CPU・メモリ・マザーボード AG03mk2使用時にデバイスが認識されなくなる【B550 phantom gaming 4】 2 2023/02/11 05:21
- デスクトップパソコン PC作成のスマート対応フアイルへの転換 1 2022/06/18 19:50
- docomo(ドコモ) SIMロック、またはSIMロック解除の仕組みをおしえてください。 5 2022/04/25 10:57
- その他(資産運用・投資) SBI証券で積立NISAを始める手順について 2 2023/03/17 16:09
- 消費者問題・詐欺 これは何かの罪になるのでしょうか? 3 2023/07/30 22:56
- タレント・お笑い芸人 皆さんお笑い好きですか? 3 2022/07/05 14:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
PNG画像の余白をカットする方法...
-
cssで点線を表示する方法
-
HTMLソースの中で、画像を表示...
-
1から100までの自然数のうち、2...
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
カラープレーンってなんですか?
-
超音波で洗脳。
-
line-height指定で発生する余白...
-
htmlの文字が縦書きになる
-
ポップアップメニューの作成方...
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
HTMLタグのDL DT DDを使ってli...
-
CSS/日本語のID・クラス名につ...
-
一括で全体を右にずらす
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
article、section、hgroup?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Macで画像の切り抜きできないの?
-
iPadのスクリーン座標のサイズ...
-
HTMLソースの中で、画像を表示...
-
ヘッダーデザインをするさい形...
-
iPhone Safari 画像の幅指定が...
-
テーブルのセル内のマージン
-
cssで点線を表示する方法
-
ボタンの配置
-
画用紙 26cm×37.5cmは 何px で...
-
スタイルシートの"_width"って...
-
サムネイル自動生成プラグインn...
-
Pythonでエクセルファイルの列...
-
十進BASICでのプログラム
-
横幅が2880pxを超えるデザイン...
-
ベイシックのプログラミングに...
-
横幅が狭いホームページ
-
スペーサーGIFの作り方
-
ブラウザ上で画像が縦長に表示...
-
FEDORA15のアイコンを小さくしたい
-
htmlの文字が縦書きになる
おすすめ情報