你怎么能在iPhone上隐藏CSS,而不是其他浏览器?

你可以用 @media queries :

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

这将自动排除iPhone浏览器下载该特定样式表的可能性(iPhone的屏幕宽度为480px);因此,将您希望隐藏在iPhone中的任何样式放入该样式表中应该是可行的。不过,很明显,它也会阻止其他设备使用该样式表,这些设备会尊重媒体查询,并且屏幕宽度低于490px。

你仍然可以做条件检查,对于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

或者简单地重定向到一个没有CSS的页面,或者使用php检测iphone并将其传递到一个没有“样式”的页面,其流为:

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

事实上,我最终选择了一个稍微不同、非常荒谬的解决方案,它使用媒体查询和 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(getComputedStyle) 关于栈溢出的想法,但我不记得在哪里。