Question

我正在尝试提高电子邮件的响应能力，但似乎遇到了一些问题，将iPhone 4,5,6,6 +的样式与Android 2.3或iPhone 3的区别区别开来。具体来说我想要某些宽度要求取决于您打开电子邮件的手机类型（较旧的手机较小的宽度）。

我遇到的具体问题是，似乎所有设备都在使用底层媒体查询，即用于Android 2.3 / iPhone3 /其他旧手机的查询。似乎它可能是某种继承问题，但我似乎无法弄清楚到底发生了什么。

以下是我正在使用的不同媒体查询定位规则以及它们在我的代码中的顺序：

预计IPHONE 6 +

@media only screen and (max-width: 736px) and (-webkit-min-device-pixel-ratio : 3) and (device-aspect-ratio: 16/9) {...}

预计IPHONE 6

@media only screen and (max-width: 667px) and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 667/375) {...}

预计适用于平板电脑

@media only screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 1) {...}

预计IPHONE 5

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {...}

预计IPHONE 4 / S

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {...}

预期用于Android 2.3，IPHONE 3及其他任何内容

@media only screen and (max-width: 480px) {...}

不幸的是，所有设备都在使用传递给底层查询的样式。任何帮助将不胜感激！

Answer 1

@media only screen and (max-width: 480px) {...}

此最后一条规则将适用于最大宽度为480px的所有屏幕，因此它将覆盖上述针对IPHONE 4 / S的2条规则以及针对相同屏幕尺寸的IPHONE 5的预期。

尝试使用＆＃34;而不是＆＃34;您的媒体中的运算符会查询更具体的定位。例如：http://www.vanseodesign.com/css/media-queries/

Answer 2

尝试将min-width添加到这些媒体查询中。前 -

@media only screen and (min-width: 481px) and (max-width: 640px) {
     body{font-size:14px;}
}

Answer 3

/ * iPhone 2G-4S的肖像和放大器风景 / @ 媒体专用屏幕和（min - 设备 - 宽度：320 px）和（最大 - 设备 - 宽度：480像素）和（-webkit - device - pixel - ratio：2）和（device - aspect - ratio：2/3）{/ STYLES GO HERE * /}

/* iPhone 5 & 5S in portrait & landscape */
@
media only screen
and(min - device - width: 320 px)
and(max - device - width: 568 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 40 / 71) { /* STYLES GO HERE */ }

/* iPhone 6 in portrait & landscape */
@
media only screen
and(min - device - width: 375 px)
and(max - device - width: 667 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 667 / 375) { /* STYLES GO HERE */ }


/* iPhone 6 plus in portrait & landscape */
@
media only screen
and(min - device - width: 414 px)
and(max - device - width: 736 px)
and(-webkit - device - pixel - ratio: 3) and(device - aspect - ratio: 16 / 9) { /* STYLES GO HERE */ }

电子邮件响应：媒体查询疑难解答（特定的iPhone定位问题）

3 个答案: