Comment simuler un écran de résolution plus élevée? [fermé]

93

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.

html css resolution HappyDeveloper
la source
@deceze en fait c'est une très bonne suggestion. L'intérêt de choses comme 960.gs qui émergent est que si vous travaillez avec des tailles de pixels, votre conception est la même partout, elle prend juste différentes quantités de surface d'écran en fonction de la résolution de l'écran. Il n'est pas nécessaire de tester des graphiques répétés horizontalement en haute résolution tant que vous pouvez voir 2 répétitions complètes et un peu pour vous assurer que les coutures sont alignées. Ou vous pouvez simplement utiliser le principe de la cigale pour produire quelque chose de plus intéressant.
Endophage
1
@Endophage: Je ne suis pas d'accord. Construire des mises en page correctement fluides donne souvent de meilleurs résultats en ce qui concerne par exemple les préférences de taille de police de l'utilisateur. Il n'est pas essentiel de se ressembler partout, c'est juste du pixel-peeping.
Vous
@Vous Je n'ai pas encore vu une mise en page fluide qui change la taille de la police. Notez que la raison pour laquelle les largeurs de pixels fixes sont bonnes est que l'œil humain a du mal à scanner les lignes sur une certaine longueur (je crois qu'il a été constaté qu'il s'agit d'environ 20 mots avec une taille de police d'environ 12 px, vous pouvez le rechercher vous-même). Si vous parlez de passer aux résolutions de téléphone, c'est une autre histoire, mais si vous parlez de résolutions de bureau / ordinateur portable, si j'ai juste un grand écran avec une haute résolution et que je redimensionne la fenêtre, je teste effectivement pour différentes résolutions.
Endophage
1
@Endophage: D'où la nécessité d'utiliser 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.
Vous le
@ Vous en fait, les pixels seront mis à l'échelle lorsque vous frapperez 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 emtailles 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/…
Endophage

Réponses:

76

[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.

Cody Crumrine
la source
5
Pourquoi ... je dois dire que c'est du génie. +1
Mafia
Bien sûr! Je vous remercie! ^^
Oskar Duveborn
Je ne peux pas vous remercier assez!
Rahman Sharif
1
Merci pour tous les retours positifs. C'est bien de savoir quand les choses sont utiles.
Cody Crumrine
1
Au cas où cela aiderait n'importe qui, voici l'exemple de code pour faire ce que @Cody Crumrine a suggéré et c'est Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>
Stuart
28

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).

Kyle
la source
Ce n'est pas une mauvaise réponse. Cependant, ce site ne fournit absolument rien que vous ne puissiez déjà faire vous-même en redimensionnant simplement la fenêtre du navigateur sur n'importe quel ordinateur de bureau. À mon humble avis, les liens sur cette page pour les tablettes et les téléphones sont totalement sans valeur ... car sur un petit écran iPod, mon site de 1000 pixels de large est automatiquement redimensionné par Mobile Safari pour s'afficher parfaitement.
Sparky
4
@ Sparky672, je ne peux personnellement pas redimensionner mon navigateur pour qu'il soit plus grand que ma résolution d'écran. L'OP demandait de voir 1920 sur un 1440. Peut-être y a-t-il un moyen, mais est-ce aussi simple que la solution d'infobyip? Toutes mes excuses si j'oublie quelque chose d'évident (j'ai l'impression que je pourrais l'être).
Kyle
2
Merci @ Sparky672 et pas de problème. Mais ne devriez-vous pas supprimer votre commentaire "que le site ne fournit absolument rien que vous ne puissiez déjà faire vous-même en redimensionnant simplement la fenêtre du navigateur sur n'importe quel ordinateur de bureau" puisque ce n'est pas vrai?
Kyle
1
@ Sparky672, qu'en est-il de la verticale?
Kyle
1
J'utilise verticalement pour voir ce qui tombe au-dessus et en dessous du pli. Je le combine avec StatsCounter et MouseFlow pour voir quel pourcentage du public voit quoi. Je t'aime Sparky! Je pense que tu lis mal mon ton. Et je voulais être utile. Personne ne se penchera sur la solution que je propose avec 0 votes et une liste de commentaires. Mais bon ...
Kyle
9

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).

StrangeWill
la source
6

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.

Eugen Constantin Dinca
la source
4

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.

Eddie Cheng
la source
La résolution d'écran affiche ceci: "La résolution de votre écran est trop petite La fenêtre contextuelle que vous avez sélectionnée est trop grande pour la résolution d'écran que vous utilisez. La résolution de votre écran est de 1440 pixels sur 900 pixels. La fenêtre contextuelle que vous avez essayé d'ouvrir est de 1920 pixels par 1200. "
HappyDeveloper
view like us jette ceci: "Interdit Vous n'êtes pas autorisé à accéder / sur ce serveur. De plus, une erreur 404 Not Found a été rencontrée lors de la tentative d'utilisation d'un ErrorDocument pour gérer la demande. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server at viewlike.us Port 80 "
HappyDeveloper
2

Bien que cela ne vous indique pas la résolution exacte de vos tests, vous pouvez utiliser l' zoomoutil 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.

Jason Gennaro
la source
2

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.

Spudley
la source
1

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.

user123444555621
la source
1

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.

Jaco Briers
la source