CSS，如何区分ios和android？

Posted 2023-03-06

【中文标题】CSS，如何区分ios和android？

【英文标题】：CSS, how to differentiate between Ios and 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 的代码？

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

希望这会有所帮助:)