ＲＷＤにしようとしたところ、iPhoneの解像度がでかく、対処法を考えています。

Question

ＲＷＤ（レスポンシブ）させたいのですが、iPhoneの画面解像度が大きすぎて、丁度いいブレイクポイントが見つかりません。
皆様のブレイクポイントの設定をよろしければ教えてくれませんか？

わたしが考えた対処法の１つですが、
html/cssはＲＷＤとして作成 ←これで下記3つ以外の設定
htmlのメタ情報にJavaScriptで条件分岐を指定
内容：iPhone,iPad,Androidであれば次のソース（ＲＷＤさせるためのもの）を読み込み ←これで3つを設定

JavaScriptを使用するので作り方がわからなくって、実際に試せていません、、

---

追記

実際にアンドロイドでみると理想のRWDになるのですが、
画素数の高いiPhoneで見てみると、画像の右の表示になってしまいます。

Answer 1

//スマホ＋全環境向けベースCSS（リキッド／フルードグリッド）
……
@media screen and (min-width: 640px) {
//640px以上 のデバイス向け記述
}

基本的には以上です。
639px未満をスマホ環境と考えて、横幅可変で伸縮するように作っておけば
AndroidだろうとiPhone6+だろうと基本的にそれぞれの画面幅に合わせて
自動フィットすると思いますが…？

マルチカラムにしている箇所が画面幅が狭くて崩れるなら分かりますが、
画面幅が大きくてクシャッと潰れるという状況がよく分かりません。
作りたいレイアウトと、iPhone6+での状況、あとHTML/CSSのコードなど
もう少し具体的な情報があればより的確なアドバイスが得られると思います。

Answer 2

@media screen and (min-width: 769px){
 .hoge{
  max-width: 100%;
  height: auto;
 }
}
@media screen and (min-width: 640px){
 .hoge{
  max-width: 100%;
  height: auto;
 }
}

みたいに、@mediaで分けるではダメですか？
横サイズに合わせて、デザイン分けするのがレスポンシブかなぁーと思ってます。

Comments

[makoto-n]

ありがとうございます。
これだとアンドロイドはサイズ合わせできるのですが、iPhone6+とかには対応できていなくって困っています。

[rihito]

/* iPhone6まで */
@media screen and (max-width: 413px)
{
}

/* iPhone6 Plus　以降の大きいスマホ */
@media screen and (max-width: 499px)
{
}
実機がなくて試せないですが・・・。
ボタンサイズが変になるとかですか？

[makoto-n]

ページ下部に書きたい規約がクシャっと潰れてしまいます。
テーブル要素を使用してみても、iPhoneのブレークポイントが大きいため、効果なしです。
3つ並んだ規約を縦ならびにブロック表示させたいだけですが、ブレークポイントが定まっていません。