3

我知道如何从除iPhone 之外的所有浏览器中隐藏 CSS：请参阅如何将样式表仅应用于 iPhone（而不是 IE），而无需浏览器嗅探？

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

4

4 回答 4

2

您可以使用@media queries：

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

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

于 2010-12-05T23:16:23.657 回答
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
于 2010-11-24T21:05:20.700 回答
0

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

if iPhone {
    echo //page without CSS
else {
    echo //page with CSS
}
于 2010-11-25T04:33:13.313 回答
0

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

<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>

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

于 2010-12-05T23:17:13.407 回答