Existe-t-il un moyen pour le navigateur de tester mes sites web dans des résolutions supérieures à celles de mes écrans ?
Par exemple : j'ai un écran de 1440 x 900, et je veux tester le site web en 1920 x 1200, 1920 x 1080, etc.
[Vérifiez d'abord les devtools de votre navigateur ! Comme l'indique @SkylarIttner dans les commentaires, les outils de test de conception réactive ont été déployés dans la plupart des navigateurs depuis la publication de la solution ci-dessous. Ils sont probablement la meilleure/la plus facile des options maintenant].
Vous pourriez, corrigez moi si je me trompe, simplement créer un iframe avec style="desired width & height" et src="your/test.site" en tant qu'enfant unique de <body> . Devrait afficher le site comme si la résolution était la largeur/hauteur spécifiée et entraîner des barres de défilement pour l'examiner.
Ce n'est pas aussi pratique que de faire appel à un tiers et de devoir le configurer soi-même, mais cela a l'avantage de pouvoir être testé localement sans connexion Internet.
Cette solution est beaucoup plus rapide que celles proposées ci-dessus :
http://www.infobyip.com/testwebsiteresolution.php
Il n'est pas aussi polyvalent que browsershots.org mais il est beaucoup plus rapide (quelques secondes contre une file d'attente de 45 minutes).
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 avis, les liens de cette page pour les tablettes et les téléphones sont totalement inutiles... car sur un petit écran d'iPod, mon site de 1000 pixels de large obtient automatiquement redimensionné par Mobile Safari pour s'afficher parfaitement bien.
@Sparky672, personnellement, je ne peux pas redimensionner mon navigateur pour qu'il soit plus grand que la résolution de mon écran. L'OP demandait de voir 1920 sur un 1440. Il y a peut-être un moyen, mais est-il aussi simple que la solution d'infobyip ? Je m'excuse si j'oublie quelque chose d'évident (j'ai l'impression que c'est le cas).
Désolé, mon écran fait déjà 1920 de large. Comme je l'ai dit, ce n'est pas une mauvaise réponse.
Quelques idées :
Utilisez le zoom du navigateur, 1024x768 50% de zoom = 2048x1536 résolution simulée, je sais que Chrome redimensionne les images et autres. 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 supérieure à la normale (fireshot sur Firefox me permettait de le faire, mais avait des problèmes de mémoire avec les très hautes résolutions, et n'est plus gratuit).
Une solution, peut-être exagérée, 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 faites une ou plusieurs captures d'écran.
Essayez viewlike.us ou résolution-écran.com . Il ne s'agit pas de toutes les résolutions possibles, mais au moins des plus courantes.
Je ne les ai pas essayés mais cela semble assez simple.
La résolution de l'écran le fait : "Votre résolution d'écran est trop petite La pop-up 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 par 900 pixels. La fenêtre pop-up que vous avez essayé d'ouvrir mesure 1920 pixels sur 1200. "
La vue comme nous jette ceci : "Forbidden Vous n'avez pas la permission d'accéder à / sur ce serveur. De plus, une erreur 404 Not Found a été rencontrée en essayant d'utiliser un ErrorDocument pour traiter la requête. 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 "
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
@deceze en fait c'est une très bonne suggestion. Le but de l'émergence de choses comme 960.gs est que si vous travaillez avec des tailles de pixel, votre design a la même apparence partout, il prend juste une quantité différente de surface d'écran en fonction de la résolution de l'écran. Il n'est pas nécessaire de tester les graphiques qui se répètent horizontalement en haute résolution tant que vous pouvez voir une répétition complète de 2 et un peu pour vous assurer que toutes les coutures sont alignées. Vous pouvez également utiliser le principe de la cigale pour produire quelque chose de plus intéressant.
1 votes
@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 des utilisateurs. Avoir la même apparence partout n'est pas essentiel, c'est juste du pixellisation.
0 votes
Je n'ai pas encore vu de 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 au-delà d'une certaine longueur (je crois qu'il s'agit d'environ 20 mots à une taille de police de 12px, vous pouvez vérifier vous-même). Si vous parlez de résolutions de téléphone, c'est une autre histoire, mais si vous parlez de résolutions d'ordinateur de bureau/portable, si j'ai un grand écran avec une haute résolution et que je redimensionne la fenêtre, je teste effectivement différentes résolutions.
1 votes
@Endophage : D'où la nécessité d'utiliser
40em(ou une mesure similaire), et non960pxcomme votre largeur. Les pixels ne seront pas mis à l'échelle si je décide que la taille de votre police de 12px est trop petite pour moi et que je clique surCmd-+. En outre, la fenêtre de mon navigateur mesure à peine 960px.0 votes
En fait, les pixels sont mis à l'échelle lorsque vous appuyez sur la touche
Ctrl/Cmd +parce que c'est une fonction de zoom. Vous pouvez l'essayer ici même sur SO. La section de contenu principal a une largeur de 960px. L'utilisation de quelque chose comme 40em ne s'adaptera pas à la résolution de l'écran. Utilisation deemLes tailles sont relatives à la taille de la police de l'élément parent, qui est héritée jusqu'à 1em/16px au niveau supérieur, sauf si elle est remplacée (et je m'excuse, j'aurais dû dire 12pt et non px dans mon commentaire précédent). Lire la suite : kyleschaeffer.com/best-practices/0 votes
@Endophage : Je peux aussi inventer les meilleures pratiques (ou laisser quelqu'un d'autre le faire). Quoi qu'il en soit, je vois que je me suis trompé concernant le zoom. Cependant, ce que
em-sur la base des largeurs sera est mis à l'échelle en fonction de la taille du texte définie dans le champ Feuille de style de l'utilisateur Cela signifie que si j'ai un écran incroyablement grand et que je fixe la taille de ma police de base à 24px, ou si j'ai un petit écran et que je la fixe à 12px, toute la mise en page sera mise à l'échelle avec elle. Ce site ne le fera pas se produisent avec une mise en page à largeur fixe basée sur les px.0 votes
Les meilleures pratiques naissent parce que beaucoup de gens décident qu'il y a une bonne façon de faire les choses. Je ne fais pas partie de ceux qui ont décidé que 960px était une bonne largeur de page, mais je ne suis pas en désaccord avec cette décision. Rien ne vous empêche d'utiliser em pour les tailles de police dans cette largeur. La largeur de la page et la taille de la police sont deux problèmes différents, vous ne faites que vous compliquer la tâche en les liant. Vous pouvez avoir le meilleur des deux mondes, une mise en page de 960px de large et des tailles de police em. Arrêtez de faire comme s'il s'agissait d'une seule et même chose.
0 votes
@Endophage : Mais les meilleures pratiques ne sont pas les meilleures pratiques juste parce qu'un blog aléatoire vous dit qu'elles le sont. Et si je veux avoir les deux
emtailles de police et pour suivre la théorie des 20 mots par ligne, je ne peut pas utiliser une largeur basée sur les pixels ; elle n'est pas mise à l'échelle correctement. Ces problèmes sont lié, car la longueur de la ligne questions .0 votes
@Vous les ~20 mots par ligne sont une limite supérieure... vous pouvez avoir MOINS. Si vous voulez continuer à dire que 960px est une meilleure pratique que j'ai inventée, allez vous plaindre aux développeurs de SO parce qu'ils sont clairement d'accord avec moi puisqu'ils l'utilisent eux-mêmes. En fait, ils font exactement ce que j'ai dit, 960px de largeur avec des tailles de police %/em à l'intérieur. Vous pouvez continuer à vous contredire, mais j'en ai terminé. Le dernier mot vous revient si vous le voulez, j'ai assez perdu de mon temps.
0 votes
@Endophage : Non, c'est un longueur idéale . Les colonnes très étroites (deux ou trois mots) sont tout aussi illisibles que les colonnes très larges.
0 votes
J'ai supprimé les discussions sur la fermeture ou la réouverture de cette question. Selon les normes d'aujourd'hui, la question devrait rester fermée, parce que nous ne faisons pas recommandations d'outils ici. Les réponses fournies ici sont déjà pour la plupart une liste vieillissante de sites Web aléatoires, ce qui est précisément ce que nous ne voulons pas.