仅用于 Iphone 6 的媒体查询

Question

对不起我的英语....

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

在我的 head 标签中，meta 元素是这样的，

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<link rel="preload" href="CSS/xxxx.css" as="style">

<link rel="preload" href="CSS/xxxx" as="style">

<link rel="preload" href="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" as="script">

我的媒体查询文件仅任何设备。现在尝试构建 iPhone 6，

/* iPhone 6/7/8 , in 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 , in 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，只有宽度和高度。

任何人都可以帮助我解决这个问题，谢谢！

Answer 1

我知道是因为之前遇到过这个问题...

我试图使用不精确的单位来定位精确的屏幕尺寸。因为我还没有找到 iPad6 的确切屏幕尺寸，所以我将按照我在 Internet 上看到的方式编写媒体查询...

/* 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 , in 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

上显示

仅用于 Iphone 6 的媒体查询

Media Query Only for Iphone 6

css

mobile

resolution