63 votes

Est-il possible d'émuler l'orientation dans un navigateur?

Comme le titre est-il possible d'émuler l'orientation dans google chrome ou firefox? Sens en quelque sorte modifier le navigateur de médias de soutien de la requête (orientation = (paysage ou portrait))

J'ai un émulateur pour mobile, mais je voudrais avoir les outils de développement de chrome ou de firebug.

Mise à jour

Chrome v25 spécifiques...

Pour personne, Google Chrome Dev Outil > Remplace > Remplacer Orientation de l'écran vous pouvez modifier l' alpha, beta et gamma. Je pense que c'est un lieu de partir, mais je n'ai aucune idée de comment cela fonctionne et peut à cet effet de ne pas trouver quoi que ce soit..

Il est également possible d'Émuler des Médias CSS, mais pas de portrait et de paysage, mais l'impression, l'écran, la télévision, etc.

29voto

MrOggy85 Points 534

Dans google Chrome Dev Tools: Si vous allez à Paramètres>Remplace>mesures de l'Appareil

Si vous changez les dimensions de la résolution de l'écran de l'orientation du changement et de la orientationchange-événement sera déclenché.

L' orientation est fonction de la relation entre la "largeur" et "hauteur". Si 'hauteur' a une valeur plus élevée que celle de la 'largeur', le navigateur sera en orientation: portrait et vice-versa.

hauteur > largeur = portrait
d'une hauteur < = largeur paysage

13voto

K. Alan Bates Points 774

Je suis sûr que d'autres ont compris comment émuler orientation dans google Chrome, maintenant, mais je suis tombé sur ce post et je voulais ajouter des instructions pour ceux qui sont encore à la recherche de l'aide.

C'est en fait plutôt simple.

Ces instructions sont en cours de


Chrome Stable 34.0.1847.131


De l'intérieur Chrome Dev Tools (à l'Intérieur de Chrome, frapper la touche F12 pour afficher Chrome Dev Tools) aller à l'Émulation onglet.
Sélectionnez le périphérique que vous souhaitez émuler de la dropdownlist et frapper Imiter. Lorsque vous Imiter, la section "Screen" qui est dans le bac de la section de la liste à gauche de l'Émulation onglet gains une coche pour indiquer qu'elle est active. Le sélectionner.

Dans la section d'Écran, la résolution de l'appareil d'émulation seront affichées dans les champs de saisie de texte vers le haut. Il y a un "swap dimensions" bouton d'entre eux qui change la largeur, la hauteur, qui dans son essence va basculer votre émulation du mode portrait à paysage.

Un certain nombre d'autres choses que vous pouvez faire à l'intérieur de Chrome Dev Tools' Émulateur

Vous pouvez:

  • Imiter le ratio de pixel Appareil
  • Émuler les types de supports de CSS (en braille,en relief,ordinateur de poche,d'impression,de projection,écran,de la parole,ats,tv: Voir RFC 2534 et les documents connexes pour plus de détails)
  • Usurper l'agent utilisateur: vous pouvez avoir Chrome "emprunter l'identité d'" autres moteurs de navigateur.
  • Émuler écran tactile (Il n'est pas parfait, mais c'est une belle touche(<=rimshot))
  • Émuler les coordonnées géographiques (y compris la "position indisponible" émulation)
  • Émuler Accéléromètre

Mon Conseil Personnel pour le Développement de l'Orientation Portrait

En supposant que vous avez un écran 16:9, une rotation VESA stand, et les pilotes qui prennent en charge un changement dans l'orientation (vous pouvez le découvrir dans Windows paramètres de Résolution d'Écran. Si il y a une "Orientation" dropdownlist, alors vous pouvez faire pivoter votre point de vue)

Physiquement de faire pivoter votre écran, puis faites pivoter votre écran dans Windows (vous pouvez aussi [Ctrl][Alt][Flèche Gauche] pour faire pivoter l'écran). Émuler une orientation en mode portrait comme je l'ai mentionné ci-dessus et que l'Appareil pixel ratio de 1. Cela permettra de faire évoluer votre appareil mobile émulateur complet de la taille de l'écran. Il ne sera pas nativement déclencher un mobile de mise en page sans l'aide supplémentaire, mais em en fonction des requêtes de média vous permettra de touches [Ctrl][+] pour augmenter l'échelle de Chrome de l'em de la valeur de déclenchement de votre mobile mise en page.

En utilisant les Outils de Dev de l'émulation permet de approximative d' une interface à écran tactile sans un moniteur à écran tactile.

Il permet également à toute taille d'écran 16:9 affichage d'un "grand écran" mobile mise en page. Naturellement, un 16:10 moniteur vous permettra d'émuler 10:16 mises en page sans avoir à redimensionner votre navigateur

Une fonctionnalité que je veux vraiment voir Google ajouter à cela la capacité tout en émulant d'avoir un "double tap" auto-redimensionnement de la fenêtre. Ce n'est pas actuellement pris en charge.

13voto

Andy Schmidt Points 11

Je suis l'aide de la Console d'entrée de cette ligne

window.dispatchEvent(new Event('orientationchange')); 

il déclenche l'événement orientationchange et donc de déclencher des écouteurs d'événement que vous avez dans votre script.

12voto

Cory Danielson Points 3770

Reportez-vous à K. Alan Bates réponse pour une explication de Chrome plus récente de l'émulation de fonctionnalités et de mises à jour.

Est-il possible d'émuler l'orientation dans un navigateur?





L'Émulation De Types De Médias

Ouvrez le Chrome Web Panneau Outils (F12 ou cependant vous l'ouvrir) Cliquez sur le petit pignon en haut à droite de la fenêtre outils de développement (en bas à droite dans les précédentes versions de chrome) coin. Sous les Paramètres de la rubrique, cliquez sur les Remplacements. Cochez ensuite la case correspondant à Émuler les CSS Media et sélectionnez le média cible que vous souhaitez simuler à partir de la liste déroulante.

enter image description here

L'Émulation De Changements D'Orientation De L'

Jetez un coup d'œil à cette jsfiddle et redimensionnement de l'image de sortie -- il va passer des arrière-plans en fonction de ce que le navigateur de l'orientation est.

body {
    background-position: top center;
}

@media screen and (orientation: portrait) {
    body { background-image: url('http://petapixel.com/assets/uploads/2013/01/vangough.jpg'); }
}
@media screen and (orientation: landscape) {
    body { background-image: url('http://cdn-media.hollywood.com/images/l/BobRoss2_620_102912.jpg'); }
}

8voto

Tom Riley Points 1093

@MrOggy85 a dit que vous avez l'orientation est définie par la hauteur et la largeur du navigateur. Vous pouvez émuler ce dans firefox via Outils > Développeur Web > Responsive Design Vue, cela vous permet de sélectionner commune de la taille de l'écran et vous permet de parcourir l'orientation. J'espère que cette aide?

Prograide.com

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.

Powered by:

X