google chrome - plugin - ¿Es posible emular la orientación en un navegador?
how to create extensions for chrome (13)
Como el título es posible emular la orientación en google chrome o firefox? Significa de alguna manera cambiar el navegador para admitir la consulta de medios (orientación = (paisaje o retrato))
Tengo un emulador para dispositivos móviles, pero me gustaría tener las herramientas de desarrollador de Chrome o Firebug.
Actualizar
Chrome v25 específico ...
Para cualquiera, en Google Chrome Dev Tool> Invalidaciones> Anular orientación del dispositivo puede cambiar alpha , beta y gamma . Creo que este es un lugar para comenzar, pero no tengo idea de cómo funcionan y, por lo tanto, no puedo encontrar nada.
También es posible Emular CSS Media, pero no retrato y paisaje, sino impresión, pantalla, televisión, etc.
Actualizar v2
Esta es una pregunta antigua, y Chrome ha cambiado muchas veces la forma de hacerlo.
Consulte la respuesta de K. Alan Bates para obtener una explicación de las funciones / actualizaciones de emulación más recientes de Chrome.
¿Es posible emular la orientación en un navegador?
Emular tipos de medios
Abra el Panel de herramientas web de Chrome (F12 o como lo abra) Haga clic en la pequeña rueda dentada en la esquina superior derecha de la ventana de herramientas del desarrollador (esquina inferior derecha en versiones anteriores de Chrome). En el encabezado Configuración , haga clic en Anulaciones . A continuación, marque la casilla de verificación junto a Emular medios CSS y luego seleccione el objetivo multimedia que desea simular desde el menú desplegable.
Emulando los cambios de orientación
Eche un vistazo a este jsfiddle y cambie el tamaño del cuadro de salida: cambiará los fondos según la orientación del navegador.
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''); }
}
- F12 la ventana
- Entrar en modo sensible
- Elija un dispositivo
- A la derecha puedes cambiar de orientación
¡¡¡Fácil!!! la vista predeterminada es Portrait si está emulando el dispositivo (a pesar de la consulta de medios css de portrait) puede manejar las resoluciones, esta imagen está en la documentación de Google https://developer.chrome.com/devtools/docs/mobile-emulation/device_metrics.png
¡Simplemente haga clic en las Flechas que se encuentran entre la RESOLUCIÓN Ancho y Alto y está HECHO!
Disfrutar
¡En la pestaña de emulación simplemente haga clic en el botón de pantalla a la izquierda y en el botón entre 320 y 568 para cambiar las resoluciones! que emulará el modo retrato y paisaje.
Aquí hay muchas respuestas, pero creo que Chrome puede haber evolucionado ligeramente y esto no es demasiado complejo. Vaya a Herramientas de desarrollo> Emulación en Chrome. Hay 4 pestañas secundarias: Dispositivo, Pantalla, Agente de usuario y Sensores. En Dispositivo , puede elegir su dispositivo (por ejemplo, "Apple iPad 1/2 / Apple Mini"). Si necesita simular la orientación de intercambio, solo ingrese en la pestaña secundaria de Pantalla y hay un pequeño botón con flechas que se desplazan hacia la izquierda y hacia la derecha para intercambiar la orientación. Solo presione ese botón.
Como @ MrOggy85 ha declarado que la orientación se define por la altura y el ancho del navegador. Puede emular esto en Firefox a través de Herramientas> Desarrollador web> Vista de diseño receptivo , esto le permite seleccionar tamaños de pantalla comunes y le permite cambiar la orientación. ¿Espero que esto ayude?
En las herramientas de desarrollo de Chrome: si va a Configuración> Modificaciones> Métricas del dispositivo
Si intercambia las dimensiones para la resolución de la pantalla, la orientación cambiará y se activará el evento orientación-cambio.
La orientación depende de la relación entre ''ancho'' y ''altura'' . Si ''altura'' tiene un valor mayor que ''ancho'', el navegador estará en orientación: ''retrato'' y viceversa.
alto> ancho = retrato
altura <ancho = paisaje
Estoy seguro de que otros ya han descubierto cómo emular la orientación en Chrome, pero me encontré con esta publicación y quise agregar instrucciones para cualquier persona que todavía esté buscando ayuda.
En realidad es bastante simple.
Estas instrucciones son actuales a partir de
Chrome estable 34.0.1847.131
Desde Chrome Dev Tools (dentro de Chrome, pulsa F12 para abrir Chrome Dev Tools) ve a la pestaña Emulación.
Seleccione el dispositivo que desea emular de la lista desplegable y presione Emular . Cuando emula, la sección "Pantalla" que está en la lista de secciones apiladas a la izquierda de la pestaña Emulación gana una marca de verificación para indicar que está activa. Seleccionarlo
En la sección Pantalla, la resolución del dispositivo que está emulando se mostrará en los campos de entrada de texto cerca de la parte superior. Hay un botón de "cambiar dimensiones" entre ellos que cambiará el ancho con la altura, lo que en esencia cambiará su emulación de vertical a horizontal.
Algunas otras cosas relevantes que puedes hacer dentro del emulador de Chrome Dev Tools
Usted puede:
- Emular la proporción de píxeles del dispositivo
- Emular tipos de medios CSS (braille, relieve, computadora de mano, impresión, proyección, pantalla, voz, tty, tv: consulte RFC 2534 y documentos relacionados para obtener más detalles)
- Agente de usuario falso: puede hacer que Chrome "suplante" a otros motores de navegador.
- Emular la pantalla táctil (No es perfecto, pero es un buen toque (<= rimshot ))
- Emular las coordenadas de geolocalización (incluida la emulación de "posición no disponible")
- Emular el acelerómetro
Mi consejo personal para el desarrollo en orientación vertical
Suponiendo que tiene un monitor 16: 9, un soporte VESA giratorio y controladores que admiten un cambio de orientación (puede encontrarlo en la configuración de resolución de pantalla de Windows. Si hay una lista desplegable de "Orientación", puede rotar la vista)
Gire físicamente la pantalla, luego gire la pantalla en Windows (también puede [Ctrl] [Alt] [Flecha izquierda] para girar la pantalla). Emule una orientación vertical como mencioné anteriormente y configure la proporción de píxeles del dispositivo en 1. Esto aumentará el tamaño del emulador de su dispositivo móvil al tamaño de pantalla completa. No activará de forma nativa un diseño móvil sin alguna ayuda adicional, pero las consultas de medios basados en em le permitirán [Ctrl] [+] ampliar el valor em de Chrome para activar su diseño móvil.
El uso de la emulación Dev Tools le permite aproximar una interfaz de pantalla táctil sin un monitor de pantalla táctil.
También le permite tener un monitor de tamaño 16: 9 que muestre un diseño móvil de "pantalla panorámica". Naturalmente, un monitor 16:10 le permitirá emular los diseños de 10:16 sin tener que cambiar el tamaño de su navegador
La única característica que realmente quiero que Google agregue a esto es la capacidad, mientras emulé para tener un "doble toque" de cambio de tamaño automático de la ventana. Eso no es compatible actualmente.
Estoy usando la consola e ingreso esta línea
window.dispatchEvent(new Event(''orientationchange''));
activará el evento de cambio de orientación y, por lo tanto, activará los detectores de eventos que tenga en su secuencia de comandos.
Los cambios de orientación del dispositivo se pueden emular en Chrome. Simplemente vaya al menú "Configuración", que se puede abrir usando el ícono de engranaje en la esquina inferior derecha de Herramientas del desarrollador y seleccione la pestaña "Modificaciones". Seleccione la casilla "Anular orientación del dispositivo" e ingrese nuevos valores en los cuadros de entrada.
Alpha representa el movimiento del dispositivo alrededor del eje z de 0 a 360 grados. Beta representa el movimiento del dispositivo alrededor del eje x de -180 a 180 grados, un movimiento de adelante hacia atrás. Gamma representa el movimiento del dispositivo alrededor del eje Y de -90 a 90 - un movimiento de izquierda a derecha. Al cambiar los valores, se activará un evento de orientación del dispositivo.
Espero que esto sea útil.
Para el último Chrome (versión 62), se cambia por completo.
- Alternar herramientas de desarrollo
- Haga clic en el menú superior derecho "Personalizar y controlar DevTools".
- Vaya a Más herramientas -> Sensores.
- Cambia la orientación a Horizontal izquierda o Horizontal derecha como quieras.
Simplemente cambie el contexto antes de establecer la orientación ...
driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");
Un poco tarde, pero esto también funciona en Google Chrome.
Abre firebug y haz clic en el ícono del teléfono, luego del cual puedes seleccionar el modelo de dispositivo en el que deseas ver la aplicación.
Algo como esto
Luego, vaya a la resolution debajo de las propiedades de emulation como se muestra en la imagen de arriba. (Esquina inferior derecha) Ahora haga clic en el ícono de doble flecha en la misma propiedad de resolution . Debería ver algo como esto
Vea que la altura y el ancho han sido intercambiados y, por lo tanto, rotados :)
Espero que ayude.