質問: 問題点 --- railsでアプリケーションを作っています。 以下のようにレスポンシブデザインを利用して、自分の持っているiPhone 5sとiPad第三世代で結果を確認してみたところ、iPhone、iPadの両方ともmin-width:768pxのcssが適応されていました。 iPhone 5sは320 × 568なので、デフォルトのcssが適応されるはずなのですが、なぜかタブレット用の方が適応されてしまいます。 ブラウザはchromeもsafariも試しましたが、結果は同じです。 どういった理由が考えられるでしょうか? ``` /* デフォルト スマホ用 */ p {color: red;} /* 768px以上 タブレット用 */ @media (min-width: 768px){ p {color: blue;} } /* 1200px以上 デスクトップ用 */ @media (min-width: 1200px){ p {color: blue;} } ``` わかっていること -------- タブレット用のcssのmin-width: 768pxをmin-width: 1000pxに変えたところ、iPhoneでデフォルトのcssが適応されました。(iPadにもデフォルトのcssが適応されてしまいましたが。。。) なので、iPhone 5sのwidthが769px~999pxというサイズになっているということだけわかっています。
回答: media queryの指定はされていますでしょうか これをhead内に追記してあげると横幅をスクリーンの横幅をdeviseの横幅に調整してくれます。(width=devise-widthが必要ないという記事見ますが、とりあえず上のコードで問題無いです) また、これが未指定だとどのブラウザでも画面の横幅を980pxに換算して実行されます おそらく質問者様がデバッグするときに > > min-width: 1000pxに変えたところ、iPhoneでデフォルトのcssが適応されました。(iPadにもデフォルトのcssが適応されてしまいましたが。。。) > > > とおっしゃってましたが、これが原因だと思います! なのでhead内に上のタグを追加してあげて下さい!