2010-04-22 6 views
2

Je souhaite afficher le contenu d'une page Web dans un format différent dans différents navigateurs. Comment s'y prendre pour l'implémenter?Comment afficher différemment une page Web dans différents navigateurs?

EDIT: Plus d'informations

La motivation sous-jacente est d'afficher le contenu dans différents appareils mobiles. Par exemple: iPhone utilise Safari Donc, si un navigateur Safari est utilisé, je modifierai le contenu afin qu'il correspond à l'écran de l'iPhone parfaitement et je peux changer la taille de police, etc

Si un autre navigateur est utilisé, alors je changera le format de manière appropriée.

+0

Les autres navigateurs utilisent-ils moins/plus de l'écran sur les appareils mobiles? En quoi est-ce différent des écrans d'ordinateur? – Rob

+0

Nous devons éliminer le défilement latéral pour voir l'information. Nous devons maximiser l'information qui peut être vue sur l'écran. –

Répondre

1

Vérifiez le contenu de l'en-tête de l'agent utilisateur envoyé avec la requête HTTP. Jusqu'à ce que vous nous en disiez plus sur ce que vous utilisez pour afficher la page, je ne peux pas être plus précis, mais vous devez comparer l'en-tête de l'agent utilisateur aux navigateurs connus, puis diffuser un contenu différent basé sur ce test.

+0

Sauf que l'en-tête n'est pas un indicateur fiable du navigateur. – Rob

+2

@Rob, il n'y a pas * d'indicateur fiable du navigateur. Les navigateurs peuvent prétendre être ce qu'ils veulent. Heck, le navigateur pourrait être juste un gars qui tape sur un terminal. L'user-agent est simplement la méthode standard d'auto-déclaration. – tloflin

+0

@tioflin - Um. C'est ce que je viens de dire. – Rob

1
<?php 
    if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) { 
     // is iPhone 
    } 
?> 
+0

Et où at-il mentionné iPhones? – Josh

+0

@Josh Juste pris comme un exemple. –

+0

et basé sur sa question révisée vous semblez avoir raison! Il n'a pas mentionné PHP non plus. – Josh

0

En plus de réagir sur différents en-têtes HTTP user-agent, vous pouvez également utiliser quelques astuces CSS pour différencier au moins les navigateurs IE et non-IE, ainsi que les différentes versions d'IE. Et bien sûr, il existe encore une autre méthode: Utilisez du code JavaScript pour afficher/masquer des parties spécifiques de la page en fonction du navigateur détecté à partir de ce code JavaScript. En règle générale, cependant, j'éviterais tout contenu spécifique au navigateur et j'écrirais les pages de manière à ce qu'elles soient correctement affichées dans les navigateurs les plus importants, et qu'elles se dégradent raisonnablement avec les anciens et les anciens navigateurs. Permettez-moi également de noter que si vous décidez de basculer user-agent après tout, s'il vous plaît assurez-vous de revenir à des valeurs par défaut raisonnables. Rien n'est plus énervant que d'avoir besoin de masquer mon navigateur A en tant que navigateur B juste parce que certains sites web ne connaissent pas le navigateur A ou quelque chose d'aussi stupide.

0

Il est difficile d'ignorer la navigation, car de nombreux agents essayent d'imiter les autres pour contourner les restrictions induites par le programmeur. Si vous essayez spécifiquement de créer une feuille de style adaptée aux mobiles, l'utilisation de l'attribut "media" de la balise LINK est un bon moyen de cibler des périphériques spécifiques. à savoir

<link rel="stylesheet" type="text/css" href="base.css" media="all"/> 
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/> 

La première feuille de style sera appliqué à tous les types de médias, alors que le second ne s'appliqué à des appareils « mobiles ».

Si vous êtes à la recherche d'un moyen de cibler uniquement IE, consultez les commentaires conditionnels: http://www.quirksmode.org/css/condcom.html

Aaaand pour un peu plus d'informations sur le contrôle de la fenêtre de l'iPhone, consultez cet article d'Apple: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Questions connexes