Le navigateur peut-il tester mes sites Web dans des résolutions supérieures à celles de mes écrans?
Exemple: j'ai un écran 1440 x 900, et je souhaite tester le site web en 1920 x 1200, 1920 x 1080, etc.
Le navigateur peut-il tester mes sites Web dans des résolutions supérieures à celles de mes écrans?
Exemple: j'ai un écran 1440 x 900, et je souhaite tester le site web en 1920 x 1200, 1920 x 1080, etc.
40em
(ou une mesure similaire), non 960px
, comme votre largeur. Les pixels ne seront pas mis à l'échelle lorsque je déciderai que la taille de votre police 12px est trop petite pour moi et que j'appuie sur Cmd
- +
. De plus, la fenêtre de mon navigateur mesure à peine 960 pixels telle quelle.
Ctrl/Cmd +
parce que c'est une fonction de zoom. Vous pouvez l'essayer ici sur SO. La section principale du contenu mesure 960 pixels de large. Utiliser quelque chose comme 40em ne s'adapte pas à la résolution de l'écran. L'utilisation des em
tailles est relative à la taille de la police de l'élément parent qui est héritée jusqu'à 1em / 16px au niveau supérieur à moins qu'elle ne soit remplacée (et excuses, cela aurait dû être 12pt et non px dans mon commentaire précédent). Lire: kyleschaeffer.com/best-practices/…
Réponses:
[Modifier: vérifiez d'abord les outils de développement de votre navigateur! Comme le souligne @SkylarIttner dans les commentaires, des outils de test de conception réactive ont été déployés depuis dans la plupart des navigateurs depuis la publication de la solution ci-dessous. C'est probablement la meilleure / la plus simple option actuellement.]
Vous pourriez, corrigez-moi si je me trompe, créez simplement une iframe avec style="desired width & height"
et en src="your/test.site"
tant que seul enfant de<body>
. Doit afficher le site comme si la résolution était la largeur / hauteur spécifiée et générer des barres de défilement pour l'examiner.
Pas aussi pratique que d'utiliser un tiers, d'avoir à le configurer vous-même, mais a l'avantage de pouvoir tester localement sans connexion Internet.
Cette solution est bien plus rapide que celles proposées ci-dessus:
http://www.infobyip.com/testwebsiteresolution.php
Ce n'est pas aussi polyvalent que browserhots.org mais c'est beaucoup plus rapide (quelques secondes contre une file d'attente de 45 minutes).
Quelques idées:
Utilisez le zoom du navigateur, un zoom de 1024x768 à 50% = une résolution simulée de 2048x1536, je sais que Chrome redimensionne les images, etc. Les choses deviennent difficiles à lire, mais je suppose que vous testez le placement et autres.
Vous pouvez également utiliser certains programmes de capture d'écran pour prendre des captures d'écran de résolution plus élevée que la normale (Fireshot sur Firefox me permet de le faire, mais a eu des problèmes de mémoire avec des résolutions très élevées, et n'est plus gratuit).
Une solution, peut-être excessive, serait d'utiliser Xvfb : définissez la résolution et la profondeur de couleur souhaitées, chargez votre page dans le (s) navigateur (s) et prenez des captures d'écran.
Essayez viewlike.us ou screen-resolution.com . Ce ne sont pas toutes les résolutions possibles, mais au moins les plus courantes.
Je ne les ai pas essayés mais cela semble assez simple.
Bien que cela ne vous indique pas la résolution exacte de vos tests, vous pouvez utiliser l' zoom
outil de Chrome ou FF pour effectuer un zoom arrière. Cela donnera une idée assez précise de ce à quoi ressemble le site sur des écrans de haute résolution.
Si vous êtes d'accord pour voir simplement une capture d'écran statique de votre site, je vous recommande http://browsershots.org/
Ils vous donnent la possibilité de voir des captures d'écran de votre site dans pratiquement n'importe quelle combinaison navigateur / système d'exploitation, y compris la possibilité de spécifier la taille de l'écran, ainsi que tout un tas d'autres options.
Cela vaut la peine d'être mis en favori.
Vous voudrez peut-être essayer wkhtmltoimage , qui peut prendre des captures d'écran à des résolutions arbitraires.
De plus, dans KDE4, il est possible d'agrandir une fenêtre au-delà de la taille de l'écran. Je pense que je l'ai vu dans Windows 7 aussi. Je ne suis pas sûr des autres systèmes d'exploitation.
IE9 vous permet de redimensionner la fenêtre du navigateur à une taille arbitraire: Appuyez sur F12 pour les outils de développement, allez dans Outils | Redimensionnez et choisissez votre taille préférée. Ensuite, utilisez un outil qui peut capturer des fenêtres hors écran si la fenêtre est plus grande que votre écran. Cet article semble indiquer que Snagit peut le faire. Ensuite, jetez un œil à la photo capturée.