iPhone 6 media query
Question
I can't get the media queries for iPhone 6+ in landscape orientation to function properly. Portrait is working just fine. I'm using @media only screen and (min-width:320px) and (max-width:568px) and (orientation: landscape) {} for iPhone 5 and @media only screen and (min-width:414px) and (max-width:736px) and (orientation: landscape) {} for iPhone 6+ - but then the iPhone 5 changes to what I've written for iPhone 6+ instead. And the iPhone 6+ doesn't change until I change 736px width to 800px width.
I've tried lots of different stuff found here on stack overflow but nothing works. And for some reason min/max-DEVICE-width doesn't work for me.
I'm using the Responsive Web Design Tester for Google Chrome to test (I haven't got an iPhone 6+ to test with). And I've got <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> in my <head> tag.
Please help!
1 answers
solution1
0 2016-11-02 12:10:36
media query for iphone 6
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
here you find great tutorial about it https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.