2011-05-27 13 views
15

Para implementar un sitio web móvil, sería útil establecer max-device-width en mi navegador. Sé complementos para falsificar el agente de usuario. ¿Esto también es posible para el ancho máximo del dispositivo? Preferiría utilizar un navegador común como Firefox, IE, Opera, ... en lugar de todo tipo de emuladores de navegador móvil o incluso diferentes teléfonos inteligentes.Faking max-device-width

Gracias, ROPO

+0

relevante: http://www.jonhiggins.co.uk/words/max-device-width/ –

Respuesta

5

En los navegadores de escritorio caso común se pueden usar para comprobaciones de validez de html & css, pero los navegadores móviles son muy diferentes en el html, css y JavaScript procesamiento.

Para "emular"max-device-width se puede reemplazar con max-device-widthmax-width y cambiar el tamaño de la ventana del navegador a tamaño requerido (versiones actuales de los navegadores es compatible con la instrucción max-width medios-consulta).

Usamos navegadores de escritorio en las etapas iniciales del desarrollo de la interfaz web móvil y los emuladores en los últimos tiempos. Los probadores de UI solo usan dispositivos reales.

+2

Esto en realidad no funcionó para mí. Cambié mi cadena de agente de usuario en Firefox e hice que el navegador fuera extremadamente estrecho, pero mi sitio todavía estaba representando con la versión de pantalla completa en mi computadora portátil y con el 480 de máximo ancho de dispositivo en mi iPhone. –

+0

¿Puede proporcionar html y css qué está utilizando? –

+1

Kevin tiene razón, esto no funcionará. max-width, que es probablemente lo que estás pensando, Phillip, está separado del ancho máximo del dispositivo. La única forma que conozco de emular esto es simplemente cambiar tu código para usar el ancho máximo, de forma temporal o permanente, según las circunstancias. No es una emulación perfecta, particularmente con respecto a la rotación del dispositivo, pero generalmente es lo suficientemente buena para la mayoría de las pruebas. Además, consulte este bookmarklet: http://www.benjaminkeen.com/misc/bricss/ –

15

Chrome le permite establecer las métricas del dispositivo, que se utilizan en el cálculo de consultas de medios para el ancho del dispositivo. Para hacerlo, abra Developer Tools, haga clic en el ícono de ajustes en la esquina inferior derecha y vaya a la pestaña Overrides.

Edición del 17 de enero de 2014: Chrome ahora tiene una pestaña Emulación, que se puede encontrar junto con la Consola, en Herramientas del desarrollador.

+0

Muy útil, ¡gracias! – Eric