适用于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的代码在哪里？因为如果它高于浏览器的代码，您的浏览器代码将在其上面写入。如果是这种情况，那么你只需要转过它。