Est-il possible d'émuler une orientation dans un navigateur?
En tant que titre, est-il possible d’émuler une orientation dans Google chrome ou firefox?), Ce qui signifie changer le navigateur pour prendre en charge la requête multimédia (orientation = (paysage ou portrait))
J'ai un émulateur pour mobile, mais j'aimerais avoir les outils de développement de chrome ou firebug.
Mise à jour
Chrome v25 spécifique ...
Pour tous, dans Google Chrome Outil de développement> Remplacements> Remplacer l'orientation du périphérique, vous pouvez modifier les paramètres alpha, beta et gamma. Je pense que c'est un endroit pour commencer, mais je ne sais pas du tout comment cela fonctionne et je ne peux donc rien trouver ..
Il est également possible d'émuler des médias CSS, mais pas de portrait et de paysage, mais d'impression, d'écran, de télévision, etc.
Mise à jour v2
C'est une vieille question, et Chrome ont changé plusieurs fois. Comment faire cela.
Reportez-vous à Réponse de K. Alan Bates pour une explication des fonctionnalités/mises à jour d'émulation les plus récentes de Chrome.
Est-il possible d'émuler une orientation dans un navigateur?
Émulation de types de support
Ouvrez le panneau Outils Web Chrome (F12 ou quel que soit l’ouverture de ce dernier)). Cliquez sur le petit pignon en haut à droite de la fenêtre des outils de développement (en bas à droite dans les versions précédentes de chrome). Sous le coin Paramètres , cliquez sur pour remplacer . Cochez ensuite la case en regard de Émulez CSS Media , puis sélectionnez la cible de média que vous souhaitez simuler dans le menu déroulant.
Émulation des modifications d'orientation
Jetez un coup d'œil à this jsfiddle et redimensionnez le cadre de sortie - le fond d'écran changera d'arrière-plan en fonction de l'orientation du navigateur.
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'); }
}
Dans Chrome Outils de développement: si vous allez à Paramètres> Remplacements> Mesures de périphérique)
Si vous permutez les dimensions pour la résolution de l'écran, l'orientation changera et l'événement orientationchange-trigger sera déclenché.
Le l'orientation dépend de la relation entre 'largeur' et 'hauteur'. Si 'height' a une valeur supérieure à 'width', le navigateur sera orienté: 'portrait' et inversement.
hauteur> largeur = portrait
hauteur <largeur = paysage
Je suis sûr que d'autres ont compris comment émuler l'orientation dans Chrome maintenant, mais je suis tombé sur ce message et je voulais ajouter des instructions à ceux qui recherchent encore de l'aide.
C'est en fait assez simple.
Ces instructions sont à jour en date du
Chrome Stable 34.0.1847.131
De l'intérieur Chrome Outils de développement (Dans Chrome, appuyez sur F12 pour afficher Chrome)), accédez à l'onglet Emulation.
Sélectionnez le périphérique que vous souhaitez émuler dans la liste déroulante et appuyez sur Emulate. Lorsque vous émulez, la section "Écran" qui se trouve dans la liste des sections empilées à gauche de l'onglet Emulation est cochée pour indiquer qu'elle est active. Sélectionnez le.
Dans la section Écran, la résolution du périphérique que vous émulez sera affichée dans des champs de saisie de texte situés près du haut. Il y a un bouton "permuter les dimensions" entre eux qui changera la largeur avec la hauteur, ce qui fera passer votre émulation de portrait en paysage.
Quelques autres choses pertinentes que vous pouvez faire à l’intérieur de Chrome Em Tools de Dev Tools
Vous pouvez:
- Émuler le ratio de pixels de l'appareil
- Émulation de types de supports CSS (braille, en relief, portable, impression, projection, écran, parole, tty, tv: voir RFC 2534 et documents connexes pour plus de précisions)
- Agent utilisateur usurpateur: vous pouvez avoir Chrome "usurper l'identité" d'autres moteurs de navigateur).
- Emuler écran tactile (Ce n'est pas parfait, mais c'est une belle touche (<= rimshot))
- Émuler les coordonnées de géolocalisation (y compris l'émulation "position indisponible")
- Emuler Accéléromètre
Mon conseil personnel pour le développement en orientation portrait
En supposant que vous disposiez d'un moniteur 16: 9, d'un socle VESA en rotation et de pilotes prenant en charge un changement d'orientation (vous pouvez le trouver dans les paramètres de résolution d'écran de Windows. S'il existe une liste déroulante "Orientation", vous pouvez faire pivoter votre vue).
Faites pivoter physiquement votre écran, puis faites pivoter votre affichage sous Windows (vous pouvez également appuyer sur les touches [Ctrl] [Alt] [Flèche gauche] pour faire pivoter l'affichage). Émulez une orientation portrait comme je l'ai mentionné ci-dessus et définissez le ratio de pixels du périphérique sur 1. Cela permettra de redimensionner l'émulateur de votre périphérique mobile à la taille d'écran. Cela ne déclenchera pas nativement une mise en page mobile sans une aide supplémentaire, mais les requêtes multimédia basées sur em vous permettront de [Ctrl] [+] de redimensionner la valeur em de Chrome pour déclencher votre mise en page mobile.
L'utilisation de l'émulation de Dev Tools vous permet de approximatif une interface à écran tactile sans moniteur à écran tactile.
Il vous permet également d’afficher sur tout écran 16: 9 une disposition mobile "grand écran". Naturellement, un moniteur 16:10 vous permettrait d’émuler des mises en page 10:16 sans avoir à redimensionner votre navigateur
La seule fonctionnalité que je souhaite vraiment que Google ajoute à cela est la possibilité, tout en émulant, de redimensionner automatiquement la fenêtre par un double tapotement. Ce n'est pas actuellement pris en charge.
J'utilise la console et saisis cette ligne
window.dispatchEvent(new Event('orientationchange'));
il déclenchera l'événement orientationchange et déclenchera donc tous les écouteurs d'événements que vous avez dans votre script.
Comme @ MrOggy85 vous l'a indiqué, l'orientation est définie par la hauteur et la largeur du navigateur. Vous pouvez émuler ceci dans firefox via Outils> Développeur Web> Mode conception adaptative, cela vous permet de sélectionner des tailles d'écran communes et d'inverser l'orientation. J'espère que ça aide?
Il y a beaucoup de réponses ici, mais je pense que Chrome a peut-être légèrement évolué et ce n'est pas trop complexe. Allez dans Outils de développement> Émulation dans Chrome. Il y a Il y a 4 sous-onglets: Périphérique, Écran, Agent utilisateur et Capteurs. Sous Périphérique vous pouvez choisir votre périphérique (par exemple, "Apple iPad 1/2/Apple Mini "). Si vous devez simuler l’orientation de permutation, allez simplement dans le sous-onglet Écran et un petit bouton avec des flèches allant de gauche à droite pour permuter l’orientation. Appuyez simplement sur ce bouton.
Pour le dernier Chrome (version 62), il est complètement modifié.
- Basculer les outils de développement.
- Cliquez sur le menu en haut à droite "Personnaliser et contrôler DevTools".
- Passez par Plus d'outils -> Capteurs.
- Changez l’orientation en paysage à gauche ou à droite comme vous le souhaitez.
Facile!!! La vue par défaut est Portrait si vous émulez le périphérique (malgré la requête multimédia de portrait), vous ne pouvez gérer que les résolutions. Cette image figure dans la documentation de Google https://developer.chrome.com/devtools/docs /mobile-emulation/device_metrics.png
Il suffit de cliquer dans les flèches entre la largeur et la hauteur de la résolution et sa fin!
Prendre plaisir
Les modifications d'orientation de l'appareil peuvent être émulées dans Chrome. Allez simplement dans le menu "Paramètres", que vous pouvez ouvrir à l’aide de l’icône cog située en bas à droite des outils de développement, puis sélectionnez l’onglet "Remplacements". Cochez la case "Remplacer l'orientation du périphérique" et entrez les nouvelles valeurs dans les champs de saisie.
Alpha représente le mouvement de l'appareil autour de l'axe z de 0 à 360 degrés. La bêta représente le mouvement du périphérique autour de l'axe des x de -180 à 180 degrés - un mouvement de l'avant vers l'arrière. Gamma représente le mouvement de l'appareil autour de l'axe des ordonnées de -90 à 90 - un mouvement de gauche à droite. La modification des valeurs déclenchera un événement deviceorientation.
J'espère que c'est utile.
Dans l'onglet Emulation, cliquez simplement sur le bouton d'écran à gauche et sur le bouton entre 320 et 568 pour changer de résolution! qui émulera les modes portrait et paysage.
Un peu tard, mais cela fonctionne sur Google chrome aussi.
Ouvrez firebug et cliquez sur l'icône du téléphone à la suite de laquelle vous pouvez sélectionner le modèle d'appareil dans lequel vous souhaitez voir l'application.
Quelque chose comme ça
Ensuite, allez à resolution sous emulation propriétés comme indiqué dans l'image ci-dessus. (Coin inférieur droit) Maintenant, cliquez sur la double flèche dans la même propriété resolution. Vous devriez voir quelque chose comme ça
Voir la hauteur et la largeur ont été échangés et donc pivoté :)
J'espère que ça t'as aidé.
Il suffit de changer le contexte avant de définir l'orientation ....
driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");
- F12 la fenêtre
- Passer en mode responsive
- Choisissez un appareil
- Sur la droite, vous pouvez changer d'orientation