iPhone6用のMedia Queries が効かない

Question

お世話になります。

いろいろと探したのですが反映されなかった為質問致します。

レスポンシブサイトで、iPhone5、iPhone6、iPhone6Plus用のMedia Queriesを設定してみたのですが、iPhone5と6Plusは設定が反映されたのですが、iPhone6の設定のみ、
iPhone5の記述の方を読み込んでしまいます。

iPhone5用
@media only screen and (min-device-width:320px) and (max-device-width:568px) {
}

iPhone6用
@media only screen and (min-device-width:375px) and (max-device-width:667px) {
}

iPhone6Plus用
@media(min-width: 414px) and (max-device-width:736px) {
}

幅の範囲がかぶっているからだと思い、iPhone6用には、classの後に!importantをつけています。

それでも、変わらずです。

本当に初歩的かもしれないのですが、
iPhone6用に効く記述方法をご教示頂けないでしょうか。

ネットで調べて紹介された方法は下記のようにやってみましたが
反応がございませんでした。

@media screen and (max-width: 374px) {
}

@media screen and (max-width: 667px) {
}

Answer 1

Google Chrom開発者ツールのレスポンシブプレビュー機能で各iPhoneの解像度を知る事ができます。

5,6,6Plusはそれぞれ320px,375px,414pxのようですから
それぞれをmax-widthにすればよいでしょう。

あとはviewportに関する記述を確認してください。