使用CSS媒体查询独立于Android设备定位iPhone

时间:2012-09-25 18:39:48

标签: android iphone html css html-email

是否可以通过CSS媒体查询独立定位Android设备,反之亦然。这是用于HTML电子邮件。

我们尝试了多种方法,但它们似乎都重叠了。

我们希望限制最大设备宽度为480的设备中的表格大小,但仅适用于基于Android的设备。

以下是我最近尝试过的内容。 iPhone(在Litmus中测试)忽略了第二个媒体查询,并将宽度保持在300px。

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 320px) {
/* Styles */
      table[class="table"], td[class="cell"] {

width: 300px;

}
}


/* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
      table[class="table"], td[class="cell"] {

width: 100%;

}
}

1 个答案:

答案 0 :(得分:2)

尝试-webkit-min-device-pixel-ratio和min-device-pixel-ratio

 /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {

请参阅http://css-tricks.com/snippets/css/media-queries-for-standard-devices/