仅用于Iphone 6的媒体查询

Question

这个问题是Webmasters Stack Exchange的migrated，因为可以在Stack Overflow上回答。Migrated3分钟前。

对不起，我的英语....

我为媒体查询构建了一个响应文件。

在我的head标记中，像这样的meta元素，

]

]

我将拥有用于[[any设备的Media Query only的文件。现在尝试为iPhone 6进行构建，

/ * iPhone 6/7/8，在CSS 667 x 375（41.6875em x 23.4375em）横向* /

@media only screen and (width: 41.6875em) 
                   and (height: 23.4375em) 
                   and (orientation: landscape) 
                   and (-webkit-min-device-pixel-ratio: 2) {

/ * iPhone 6/7/8，在CSS 375 x 667（23.4375em x 41.6875em）纵向* /

@media only screen and (width: 23.4375em) 
                   and (height: 41.6875em) 
                   and (orientation: portrait ) 
                   and (-webkit-min-device-pixel-ratio: 2) {

[当使用Chrome测试我的网站时，所有人都看到了精彩的……，但
search.google

展示了这一点，它说的是[文本准备得太小了]和[可点击元素太靠近了。我认为我的问题是因为width：23.4375em和

height：41.6875em

不是iPhone 6的分辨率，它们仅在

max

和min下工作。我在互联网上搜索，只有found的min-device-width和max-device-widt，我的问题，如何在没有max和min的情况下仅在

width

和height的情况下具有iPhone 6的Media Query。请帮助我，任何人，有这个问题，谢谢！对不起，我的英语...。我为媒体查询构建了一个响应文件。在我的头标签中，像这样的元元素＆...

Answer 1

/ * iPhone 6/7/8，以CSS 667 x 375（41.6875em x 23.4375em）横向* /

@media only screen and (min-device-width: 23.4375em) 
               and (max-device-width: 41.6875em) 
               and (orientation: landscape) 
               and (-webkit-min-device-pixel-ratio: 2) {}

/ * iPhone 6/7/8，以CSS 375 x 667（23.4375em x 41.6875em）纵向* /

@media only screen and (min-device-width: 23.4375em) 
               and (max-device-width: 41.6875em) 
               and (orientation: portrait ) 
               and (-webkit-min-device-pixel-ratio: 2){ }

如何在
search.google
上立即显示