質問: 現状・問題点 ------ 初心者です。 レスポンシブページの修正をしています。 ページ内には画像や文章、cssで吹き出しを作成して表示している箇所があります。 画像や文章は可変しますが、吹き出し部分と画像の位置が、iPhone5~7それぞれのバージョン?によって異なります。 iPhone6と6Plusではきれいに修正し、iPhone5用でも記述しても iPhone6の方を読み込む、もしくは逆(5の記述を6の時に読み込んでしまう、など)が発生します。 ### 前提・実現したいこと 0からレスポンシブサイトをコーディングしたことがないのですが、 iPhone5、6、6Plus、7、など、画面サイズが異なるデバイスの場合でも きれいにレイアウトしたいです。 cssの記述はそれぞれのバージョンで記載はしてあるので、 メディアクエリだけ効くようにしたいです。 ### 該当のソースコード ``` iPhone5の時 @media(min-width: 320px) and (max-device-width:568px) {} iPhone6の時 @media screen and (max-width: 667px) {} iPhone6Plusの時 @media(min-width: 414px) and (max-device-width:736px) {} 上記は検索して試して効いたものです。 ``` ``` viewportは下記で設定しています。 ``` ### 確認方法 iPhone5、6、7 PCのChromeでの開発者ツール
回答: メディアクエリの指定にmax-widthとmax-device-widthなどが混在していますが、この2つは明確に異なります。 具体的に参照したページが不明ですが、理解して使うことが大事かと。 mediaQuery における max-width, max-device-width の違い また、そもそもその指定が異なっているようですのでこちらで再度試してみてください。 ``` ■ iPhone 5 @media only screen and (min-device-width:320px) and (max-device-width:568px) { //CSS記述 } ■ iPhone 6 @media only screen and (min-device-width:375px) and (max-device-width:667px) { //CSS記述 } ■ iPhone 6 Plus @media only screen and (min-device-width:414px) and (max-device-width:736px) { //CSS記述 } ``` CSSデバイス別サイズ Screen Sizes