iPhone 6媒体查询
[英]iPhone 6 media query
问题描述
I can't get the media queries for iPhone 6+ in landscape orientation to function properly. 
我无法横向获取iPhone 6+的媒体查询，以使其正常运行。 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. 我正在使用@media only screen and (min-width:320px) and (max-width:568px) and (orientation: landscape) {}用于iPhone 5和@media only screen and (min-width:414px) and (max-width:736px) and (orientation: landscape) {}适用于iPhone 6+），但随后iPhone 5更改为我为iPhone 6+编写的内容。 And the iPhone 6+ doesn't change until I change 736px width to 800px width. 而且直到我将736px宽度更改为800px宽度时，iPhone 6+才会更改。
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). 我正在使用适用于Google Chrome的自适应Web设计测试器进行测试（我没有要测试的iPhone 6+）。 And I've got <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> in my <head> tag. 我的<head>标记中有<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 。
Please help! 请帮忙！
1 个解决方案
解决方案1
0 2016-11-02 12:10:36
media query for iphone 6 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/ 在这里您可以找到有关它的出色教程https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.