iPhoneからCSSを隠すことはできますが、他のブラウザではできません。

Question

私はiPhoneを除くすべてのブラウザからCSSを非表示にする方法を知っている：How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

を参照してくださいしかし：どのように私はiPhoneからCSSを隠すではなく、他のブラウザのですか？

Answer 1

実際には、私たちが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> 

私はスタックオーバーフローにgetComputedStyleアイデアを得たと確信しているが、私はどこ覚えていないことができます。

Answer 2

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 

Answer 3

またはCSSなしのページへの単純なリダイレクト、またはiPhoneを検出し、スタイルずに彼らにページを提供するためにPHPを使用する - の流れで何か：あなたは、おそらく使用することができ

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

Answer 4

@media queries：

、自動的にその特定のスタイルシート（480PXているiPhoneの画面幅）をダウンロードからiPhoneブラウザを除外する

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

。あなたがiPhoneから隠しておきたいスタイルをそのスタイルシートに入れることはうまくいくはずです。明らかに、メディアクエリを尊重し、490ピクセル以下の画面幅を持つ他のデバイスからのスタイルシートもブロックします。