android - CSS，如何区分ios和android？

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媒体查询，即(iPhone的Safari和Android设备的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链接可以帮助您解决同样的问题。

希望这有帮助:)