Quelle est la meilleure façon de tester une page Web avec une résolution plus élevée que les résolutions de votre écran actuel?

10

Je crée un site Web réactif où j'ai besoin de tester le rendu CSS, HTML, Javascript de ma page Web avec une résolution de 2400 pixels alors que mon écran ne fait que 1900 pixels.

windows display resolution website engrenage en métal solide
la source
doublon possible de Comment pouvez-vous prendre une capture d'écran d'une page Web entière?
Ƭᴇcʜιᴇ007
Vous vous rendez compte que vous pouvez redimensionner les fenêtres du navigateur au-delà de votre résolution d'écran sur la plupart des systèmes? Déplacez-les simplement à mi-chemin de l'écran, puis redimensionnez la bordure qui se trouve maintenant au milieu de l'écran. Il est inutile pour une utilisation réelle, mais suffira pour les tests. Cette capture d'écran de la fenêtre complète a été prise sur OS X avec une résolution d'écran de 1680x150.
Daniel Beck
@DanielBeck - étrange j'essaye la même chose sur mon Chomre (Windows) mais il ne s'étend pas au-delà de mon écran actuel
engrenage métallique solide
C'est vraiment un problème avec votre OS essayant de vous déjouer alors . Peut se reproduire avec Safari sur Windows 7.
Daniel Beck
Le mien est aussi Windows 7
engrenage métallique solide

Réponses:

3

Dans le navigateur Chrome:

  1. Appuyez sur F12. Cela ouvrira DevTools.

  2. Cliquez sur une icône de paramètres dans le coin inférieur droit. Cela ouvrira les paramètres DevTools.

  3. Accédez à Remplacements dans le menu de gauche.

  4. Vérifiez les mesures Activer et Appareil.

  5. Tapez la résolution d'écran

Je l'utilise toujours, c'est vraiment pratique.

Arman Bimatov
la source
2

Si vous appuyez sur Ctrl+ Shift+ Mdans les versions récentes de Firefox, vous entrerez dans Responsive Design View , qui peut redimensionner la fenêtre du navigateur pour être plus grande que la taille réelle de l'écran. Vous pouvez également prendre des captures d'écran et simuler des événements tactiles à partir de FF 26.

Capture d'écran de RDV
Cliquez pour agrandir

Il peut être plus facile de redimensionner une fois la fenêtre plus petite - vous pouvez faire glisser davantage les calibreurs en une seule fois. Ou entrez simplement un préréglage personnalisé dans la liste déroulante.

Bob
la source
Existe-t-il une API pour cette option? Pour l'avoir activé via le code js injecté soit depuis le site Web, soit depuis l'intérieur d'un addon?
Kamal Reddy
@KamalReddy Je ne pense pas que vous seriez en mesure de le faire à partir du contexte de contenu (site Web), mais cela devrait être possible à partir du contexte de chrome (module complémentaire). Eh bien, à l'avenir de toute façon. Peut-être pouvez-vous simuler Ctrl + Maj + M?
Bob
1

Vous pouvez essayer ce site Web, il vous permet de tester votre page Web avec n'importe quelle résolution d'écran, il vous permet de choisir parmi des résolutions prédéfinies ou d'entrer votre résolution personnalisée. j'espère que vous trouverez ces lignes utiles.

kamalam
la source
Être bloqué par notre serveur proxy. S'agit-il d'un pointeur vers un autre site, ou cette page PHP est-elle la page réelle de l'outil?
Canadian Luke
la page PHP que j'ai ajoutée ici est la page réelle de l'outil
kamalam
0

Cette question est probablement plus adaptée aux Webmasters mais je vais essayer et suggérer ViewLikeUs qui

vous permet de vérifier l'apparence de votre site Web dans les formats de résolution les plus populaires.

CharlieRB
la source
1
il n'a que 1920 max
engrenage métallique solide
0

Ajoutez une résolution d'écran personnalisée dans le panneau de configuration de votre carte vidéo.

GENiEBEN
la source
3
Des résolutions supérieures à celles prises en charge par l'écran? Pourriez-vous fournir plus de détails sur la façon de configurer cela et à quoi il ressemble?
Daniel Beck
@DanielBeck Ce lien de tutoriel YouTube est destiné aux cartes nVidia. Assez similaire pour ATI / AMD.
GENiEBEN
2
@ElGenieben Cette vidéo avertit explicitement à 0:39 que vous pourriez endommager votre écran en définissant une résolution trop élevée.
Nicole Hamilton
0

Modifiez simplement le zoom de votre navigateur, lorsque vous effectuez un zoom arrière, la taille de votre fenêtre rapporte essentiellement une largeur de plus en plus grande à votre application.

exemple jsfiddle ici , cliquez simplement sur le bouton, voyez la largeur qu'il rapporte, puis faites un zoom arrière et cliquez sur le même bouton - il rapportera une taille plus grande.

Doobeh
la source
0

Essayez les paramètres de résolution personnalisés dans l'émulateur d'appareil de Google Chrome. Il vous donne plus de contrôle que d'utiliser la fonctionnalité de zoom du navigateur.

Activez l'émulateur de périphérique et cochez l'option «Zoom pour s'adapter».

Entrez manuellement des résolutions jusqu'à 9999 pixels de large (ou faites glisser les bords de l'écran émulé. La résolution émulée sera mise à l'échelle pour s'adapter à votre propre fenêtre d'affichage.

Vous pouvez garder la hauteur de résolution basse car vous pourrez quand même faire défiler vers le bas. De cette façon, vous pouvez également laisser l'inspecteur ouvert. Un excellent workflow pour le développement web!

bramchi
la source