CSS，如何区分ios和android？答案

【问题标题】：CSS, how to differentiate between Ios and android?CSS，如何区分ios和android？
【发布时间】：2015-12-15 13:00:11
【问题描述】：

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

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

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

然后，如果我更改 CSS，它适用于 Ios，但不适用于 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;
    }
}

【问题讨论】：

首先：您可以嗅探用户代理字符串。但是这种做法是非常不鼓励的，因为您应该尽可能地设计和开发您的网站，而不是客户意识。其次：能否请您发布仅适用于 iOS 或 Android 的代码？

标签： android ios css media-queries

【解决方案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 链接也可以帮助您。

希望这会有所帮助:)

【讨论】：