meta "viewport" ancho del dispositivo: Ancho incorrecto pequeño en Opera Mobile 9.7 (10 trabajos)

Question

Para mi proyecto web móvil actual utilizo la etiqueta meta "viewport" para indicar al navegador móvil que use una escala de 1: 1 con ancho de los dispositivos:

<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

Esto funciona en IE móvil, iPhone Safari e incluso en Opera 10 beta, pero no lo hace en Opera 9.7, que es por defecto instalado en HTC HD2. El HTC HD2 tiene dimensiones de dispositivo de 480x800, por lo que la ventana gráfica debe tener un ancho de 480 en modo vertical. Pero parece que Opera mobile 9.7 (y tal vez 9,5 también) establece un ancho incorrecto, por lo que después de eso, todo se amplía un poco. He utilizado un corto fragmento de código JavaScript para inspeccionar el tamaño de la ventana real:

$ (window) .width() -> devuelve 274
window.innerWidth -> devuelve 480

Cuando i hardcode 480 en lugar de "dispositivo "ancho" todo funciona correctamente. Lo mismo digo de paisaje-mode:

$ (ventana) .width() -> devuelve 457
window.innerWidth -> devuelve 800

¿Hay alguna solución para esto?

Saludos

Answer 1

¿Ha probado la etiqueta HandleFriendly?

Trabajos sobre BB e indica que usted ha diseñado para la pequeña pantalla de código

Answer 2

Tenga una mirada en sitio móvil Quirksmode.org de PPK. ¡Montones de información, más tablas de compatibilidad!

Answer 3

Sé que esta es una pregunta antigua, pero podría ayudar a alguien. En este artículo hay una sección sobre compatibilidad con la metaetiqueta de ventana gráfica en Opera Mobile 9.7: http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/ No se admiten los atributos escalable, escala mínima y escala de usuario, pero deben ser de ancho, alto y escala inicial. Si no funciona bien, siempre puedes intentar usar consultas de medios CSS. Hay una descripción y un ejemplo en el mismo artículo.

Answer 4

estoy un poco tarde en esto, pero: la metaetiqueta de la ventana gráfica debe considerarse como píxeles CSS, no como píxeles físicos de la pantalla. y la relación entre ellos puede ser bastante diferente con respecto a la densidad de píxeles físicos del dispositivo:

iPhone3: 320x480px físico/CSS 320x480px => ratio = 1, fácil.

iPhone4: física 320x480px 640x960px/CSS => ratio = 2, que es lo que pensó de Apple de hacer cuando hicieron píxeles dos veces más pequeños en el iPhone4 con el fin de mantener los sitios optimizados para 3 trabajan exactamente igual en 4.

HTC Desire HD: físico 480x800px/CSS 320x533px => ratio = 1.5, que probablemente sea algo parecido a lo que experimentas con HTC HD2.

si utiliza el ancho = valor de ancho del dispositivo para la ventana gráfica, supongo que no debería tener un ancho fijo en su diseño, sino mejor utilizar anchos en%, teniendo en cuenta que en la mayoría (reciente) dispositivos móviles su ancho total de CSS estará en algún lugar alrededor de 320px (vertical) o 500px (horizontal) en una escala de 1.0.

Answer 5

echar un vistazo a: http://www.quirksmode.org/mobile/viewports2.html entrar en un mundo de dolor :)