Comment faire pour que les navigateurs de bureau ignorent la requête multimédia css3 de l'iPhone

Question

J'inclus une feuille de style alternative pour iPhone/iTouch. Dans un premier temps je voulais utiliser simplement le type de support handheld:

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?> 

que j'ajouter au document DOM ainsi:

//Add handheld stylesheet 
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'"); 
doc.InsertBefore(pi, doc.DocumentElement); 

//Default css, for everyone else 
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'"); 
doc.InsertBefore(pi, doc.DocumentElement); 

Malheureusement, Safari navigateur de l'iPhone ne supporte pas le type handheld média . La solution proposée par Apple est d'utiliser un CSS3 requête média, en remplacement handheld:

media='handheld' 

avec une requête qui détecte iPhone- comme appareils:

media="only screen and (max-device-width: 480px)" 

Note: 480px est- la largeur de l'iPhone retourné (ie paysage)

Donc j'inclus ce type de support dans mes liens de stylesheet:

//Add handheld stylesheet 
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'"); 
doc.InsertBefore(pi, doc.DocumentElement); 

//BUG: iPhone doesn't support handheld media type. Use the CSS3 media query hack 
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'"); 
doc.InsertBefore(pi, doc.DocumentElement); 

//Default css, for everyone else 
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'"); 
doc.InsertBefore(pi, doc.DocumentElement); 

Ce qui donne le xml:

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?> 

Et tout semble être bon, sauf que les navigateurs maintenant (IE8, Chrome5) commencer à utiliser le xsl "de poche".

"navigateurs".

Note: Firefox (3.5) ne prend pas en charge le rendu xml contenu avec xml-stylesheet du tout. C'est pourquoi je ne l'inclue pas dans la liste des "navigateurs".

---

j'ai essayé de déplacer les "tous" noeuds de feuille de style au-dessus des médias spécifiques à l'iPhone requête:

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?> 
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?> 

Mais -à-dire et Chrome continuer à utiliser le only screen and (max-device-wisth: 480px) type de support.

---

Comment puis-je avoir un stylesheet demander ordinateurs de poche, et une autre demande de « tout le monde ».

Answer 1

Pas très familier avec l'implémentation XML, mais voici un bon article que je viens de lire en le faisant juste avec l'attribut media (qui laisse les utilisateurs IE), ou en utilisant un javascript.

http://css-tricks.com/resolution-specific-stylesheets/

Le court, c'est que vous annonce une carte d'identité à la <link> quelque chose comme:
<link rel="stylesheet" type="text/css" href="main.css" /> <link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Utilisez ensuite js pour déterminer la taille de la fenêtre du navigateur, et en fonction de ce que vous paramètres voulez cible, vous utilisez l'ID en tant que hotte pour remplacer la valeur href par la feuille de style appropriée.

Answer 2

Voici quelques projets qui permettent de résoudre cette question qui sont intéressants à ce problème:

• 320 and up:

  « 320 et Up » empêche les appareils mobiles de télécharger des actifs de bureau par en utilisant la feuille de style d'un petit écran comme son point de départ.

• Lessframework:

  cadre moins est un système de grille CSS pour la conception de sites Web adaptatifs. Il contient 4 mises en page et 3 ensembles de préréglages de typographie , tous basés sur une grille unique .