2008-11-03 10 views
11

J'ai ajouté le support css pour portatif à mon site Web, mais je n'ai pas été en mesure de trouver un bon outil pour les tests.Qu'est-ce que vous utilisez pour tester le css de poche sur votre site Web?

J'ai essayé d'utiliser le plugin webdeveloper pour Firefox mais ça ne marche pas pour moi. Peut-être que c'est parce que tout mon css est dans le fichier html et pas un fichier css séparé.

Y a-t-il d'autres outils de test disponibles en plus de sortir et d'acheter un appareil de poche?

Répondre

8

J'ai trouvé ce que je cherchais, merci pour les prospects les gars.

Opera affiche le ordinateur de poche css si vous sélectionnez "Petit écran" dans le menu Affichage.

+0

Vous pouvez également tester le css basé sur l'écran dans IE6 sur windows, mais je ne le recommanderais pas ... –

+0

Pourquoi diable quelqu'un aurait-il déprécié cela quand je l'aurais trouvé, appelez-moi confus. – KPexEA

+0

Je ne vois pas l'option "Small Screen" dans la dernière version (10.53) d'Opera. Peut-être qu'il a été retiré. –

3

Si vous utilisez Visual Studio, vous devez disposer d'émulateurs de périphériques qui vous permettent de tester IE mobile ou de le trouver sur le site de Microsoft. Here are some for WM 5. Il y a un OpenWave simulator disponible pour tester ce navigateur. Blackberry simulators sont également disponibles pour tester le navigateur Blackberry. Vous pouvez (en quelque sorte) tester le support de l'iPhone avec Safari, bien que vous ne puissiez pas vérifier le méta-tag de la fenêtre d'affichage. Il y a un Opera Mini simulator ici.

En outre, obtenir votre CSS de votre HTML :)

+0

Mon CSS est intégré car il est personnalisé en fonction des préférences des utilisateurs (ils peuvent personnaliser la taille de police par défaut/couleurs etc). Je suppose que je devrais séparer la partie qui est statique. C'est sur ma liste de choses à faire. – KPexEA

+0

Vous pouvez également le servir dynamiquement à partir de votre serveur. Avoir un processus côté serveur (script PHP, peu importe) gérer la requête pour customUser.css et l'écrire en fonction de leurs préférences. De cette façon, il peut toujours être mis en cache par le navigateur. –

0

Pour tester l'iPhone, vous pouvez obtenir l'iPhone SDK here Mais vous devez OS X/Apple ordinateur pour qu'il fonctionne comme officiel.

Pas hacks officiels /:

  • Il y a plusieurs façons d'obtenir OS X sur le matériel standart PC comme here.
  • Ou obtenir le SDK fonctionnant sous Linux/vmware décrit here.

Happy Hacking! Avec un peu de chasse

Huibert Gill

6

Je ne suis pas sûr que ce soit une bonne idée de ressusciter la vieille question, mais j'espère que quelqu'un le trouve :)

Il y a un moyen simple de tester css de poche avec des media queries:

@media handheld, screen and (max-width: 500px) { /* your css */ } 

Après cela, vous pouvez tester sur les navigateurs qui implémentent des requêtes de médias en redimensionnant la fenêtre à moins de 500px.

+0

merveilleux .. facile et fonctionnel! Merci –

1

J'ai découvert que le changement de type de média dans l'environnement de développement me convient le mieux. Par exemple, si vous testez un css «portable», ajoutez simplement le type de média «screen» à media atrib et commentez votre CSS par défaut.

Une fois cette étape terminée, vous souhaiterez normalement effectuer un test sur un périphérique portable réel.

<!-- <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> --> 
<link rel="stylesheet" type="text/css" media="screen,handheld" href="handheld.css" /> 
0

La plupart des smartphones comme l'iPhone et certains appareils Android ne reconnaissent pas le handheld.css. Ils ont pris le mediatype="screen" de sorte que vous devez inclure ce short snippet of JavaScript.

Questions connexes