iPhone 6 と 6 PLUSに対応したレスポンシブデザインのためのMedia Queries

  • 2014年10月6日
iPhone 6 と 6 PLUSに対応したレスポンシブデザインのためのMedia Queries

レスポンシブデザインをするときに使用する、iPhone 6 と iPhone 6 Plus のCSS3のメディアクエリーのパターンになります。

ご紹介するメディアクエリー

iPhone 6 がデバイスが縦置きのとき (portrait: 幅より高さが高い表示)

@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (orientation : portrait) { 

}

iPhone 6 がデバイスが横置きのとき (landscape: 高さより幅が広い表示)

@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (orientation : landscape) { 

}

iPhone 6+ がデバイスが縦置きのとき (portrait: 幅より高さが高い表示)

@media only screen and (min-device-width: 414px)
 and (max-device-width: 736px)
 and (orientation : portrait) { 

}

iPhone 6+ がデバイスが横置きのとき (landscape: 高さより幅が広い表示)

@media only screen and (min-device-width: 414px)
 and (max-device-width: 736px)
 and (orientation : landscape) { 

}

iPhone 6 and iPhone 6+ がデバイスが縦置きとデバイスが横置きのとき

@media only screen and (max-device-width: 640px),
 only screen and (max-device-width: 667px),
 only screen and (max-width: 480px){ 
}

iPhone 6 と iPhone 6+ がデバイスが縦置きのとき (portrait: 幅より高さが高い表示)

@media only screen and (max-device-width: 640px),
 only screen and (max-device-width: 667px),
 only screen and (max-width: 480px) and (orientation : portrait){ 

}

iPhone 6 と iPhone 6+ がデバイスが横置きのとき (landscape: 高さより幅が広い表示)

@media only screen and (max-device-width: 640px),
 only screen and (max-device-width: 667px),
 only screen and (max-width: 480px) and (orientation : landscape){ 

}