iPhone 6 和浏览器的媒体查询

Question

我有两个不同的媒体查询，用于 iPhone 和浏览器。但是 iPhone 不工作。顺序是样式表中的第一个浏览器，然后是 iPhone。当我在 iPhone 上检查网站并检查其显示来自浏览器的查询时，而不是来自 iPhone。该怎么办？？

我看到了这个：iphone-6-and-6-plus-media-queries，但是我想要的不在那里。

浏览器：

@media only screen and (max-width: 640px) {
    #my_div li a img {   height: 51% !important;   top: 19% !important;}
}
@media only screen and (max-width: 360px) {
   .....
}
@media only screen and (max-width: 320px) {
   .....
}

iPhone：

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    #my_div li a img { height: 31% !important; top: 14% !important;}
}

Answer 1

如果您想针对 Iphone 6 使用；

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

仅添加方向；

and (orientation : landscape) OR and (orientation : portrait) 

适用于 Iphone 6 plus 使用；

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

我认为您的情况 -webkit-device-pixel-ratio 是它不起作用的原因。

Answer 2

你的css中iphone的代码在哪里？因为如果它在浏览器代码之上，您的浏览器代码将覆盖它。如果是这种情况，那么您只需将其转过来即可。