Comment pouvez-vous cacher CSS de l'iPhone, mais pas d'autres navigateurs?

Question

Je sais comment cacher CSS de tous les navigateurs sauf l'iPhone: voir How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

Mais: comment puis-je cacher CSS de l'iPhone, mais pas les autres navigateurs?

Answer 1

En fait, je me suis retrouvé avec une solution légèrement différente, et très ridicule, qui utilise des requêtes média et getComputedStyle pour rediriger vers un site mobile si nous sommes sur un appareil de type 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> 

Je suis sûr que j'ai eu l'idée sur Stack Overflow getComputedStyle, mais je ne me souviens pas où.

Answer 2

Vous pouvez toujours effectuer la vérification conditionnelle, car les iPhones ajoutent l'iPhone CSS sinon votre CSS normal.

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

ou un simple redirection vers une page sans CSS ou utiliser PHP pour détecter les iPhones et les livrer une page sans style - quelque chose avec un flux de:

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

Answer 4

Vous pourriez utiliser @media queries:

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

ce qui exclurait automatiquement les navigateurs iPhone de télécharger cette feuille de style particulier (la largeur de l'écran de l'iPhone étant 480px); Donc mettre tous les styles que vous voulez cacher de l'iPhone dans cette feuille de style devrait fonctionner. Bien que, évidemment, il bloque également cette feuille de style d'autres périphériques qui respectent les requêtes de médias et ont une largeur d'écran inférieure à 490px.