如何隐藏 iPhone 上的 CSS，而不是其他浏览器？答案

【问题标题】：How can you hide CSS from the iPhone, but not other browsers?如何隐藏 iPhone 上的 CSS，而不是其他浏览器？
【发布时间】：2011-05-15 08:36:49
【问题描述】：

我知道如何对所有浏览器隐藏 CSS除了 iPhone：请参阅 How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

但是：如何在 iPhone 中隐藏 CSS，而不是其他浏览器？

【问题讨论】：

同时，在这里可以找到更好的答案：stackoverflow.com/a/47818418/214500

标签： iphone css ios media-queries

【解决方案1】：

您仍然可以进行条件检查，对于 iPhone 附加 iPhone CSS，否则附加您的正常 CSS。

var agent=navigator.userAgent.toLowerCase();
var isIPhone = ((agent.indexOf('iphone')!=-1);

if (isIPhone)
  document.createElement("style")... //iPhone CSS
else
  document.createElement("style")... //normal CSS

【讨论】：

当然，尽管这确实意味着您正在使用 JavaScript 在每个浏览器中应用样式表。
如果它不只是一个 HTML 页面，您也可以通过检查 http_user_agent 来执行此服务器端。

【解决方案2】：

或者一个简单的重定向到一个没有 CSS 的页面，或者使用 PHP 来检测 iPhone 并为他们提供一个没有样式的页面 - 有一个流程：

if iPhone {
    echo //page without CSS
else {
    echo //page with CSS
}

【讨论】：

【解决方案3】：

你可以使用@media queries:

<link rel="stylesheet" href="noniPhoneStylesheet1.css" media="only screen and (min-device-width:490px)" />

这会自动排除 iPhone 浏览器下载该特定样式表（iPhone 的屏幕宽度为 480 像素）；因此，将您想要从 iPhone 中隐藏的任何样式放入该样式表中应该可以工作。虽然，很明显，它还会阻止其他设备访问该样式表，这些设备尊重媒体查询并且屏幕宽度低于 490 像素。

【讨论】：

而且...希望它真的有效... =0（我没有尝试过，只是看起来它应该...）
@Paul，对此有什么好运气或反馈吗？
@David：是的——不幸的是，这也将它隐藏在 Firefox 3.0 和 IE 9（可能更低）中，所以目前，它不适合拥有主流受众的网站。不过 Opera 9.0 和 Safari 3.0 还不错，所以一旦 Firefox 3.0 已经死了，这个方法加上 IE 的条件 cmets 就可以了。
@Paul：嗯。这是 Firefox 的一个奇怪的逆向实现 =/ 你能找到替代方法吗？
@David：我认为这是正确的——我相信规范说如果浏览器不理解媒体查询的一部分，它应该忽略样式表。

【解决方案4】：

实际上，如果我们在类似 iPhone 的设备上使用媒体查询和 getComputedStyle 来重定向到移动网站，我实际上最终采用了一个略有不同且非常荒谬的解决方案。

<style media="only screen and (max-device-width: 480px)">html{border-top-style:dashed;}</style>

<script>
if(window.location.search.indexOf("?m=t")==-1 && window.getComputedStyle) {
    var mobile = false;

    if(window.getComputedStyle(document.getElementsByTagName("html")[0],null).getPropertyValue("border-top-style")=="dashed") {
        var mobile = true;
    }

    if(mobile) {
        window.location.replace(window.location+"?m=t");
    }
}
</script>

我确定我在 Stack Overflow 上得到了 getComputedStyle 的想法，但我不记得在哪里。

【讨论】：