Question

我目前有一个使用iframe加载网页的程序。

此网页采用普通CSS文件设置样式。我使用媒体查询来更改移动设备的样式。

我偶然发现了一个问题，我的媒体查询适用于Android但不适用于Ios屏幕。

然后，如果我更改CSS，它适用于Ios但不适用于Android。

有没有办法编写两个单独的媒体查询。一个用于Android设备，另一个用于Ios？

我真的很感激一些帮助！

修改

我添加了一些CSS代码：

/* ----------------- Mobile css ----------------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {   
    #payment-submit {
    line-height:50px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari 5+ ONLY */
    ::i-block-chrome, #payment-submit {
     line-height:none;
    }
}

Answer 1

我认为您应该基于浏览器应用css媒体查询，即（适用于Android设备的iPhone和适用于Chrome的浏览器）。现在，您只需要应用媒体查询。下面是相同的CSS。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Chrome, if Chrome rule needed */
    .someClass {
     color:#c00;
    }
    /* Safari 5+ ONLY */
    ::i-block-chrome, .someClass {
     color:#000;
    }
}

此外，this和this链接也可以为您提供帮助。

希望这会有所帮助：）

CSS，如何区分Ios和android？

1 个答案: