Confundido en "escala inicial = 1.0" - iphone 3GS vs 4

Tengo algunos problemas para que mi sitio web se escale correctamente para dispositivos móviles.Confundido en "escala inicial = 1.0" - iphone 3GS vs 4

Tenemos un sitio diseñado para un ancho mínimo de 640px, como máximo. Tengo la etiqueta meta actualmente:

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

Ahora - La parte estoy confundido acerca es que si uso "escala inicial = 1.0", obviamente, el sitio se escala 1: 1, y se verá horrible en un iPhone 3Gs (solo verá la mitad del sitio). Ahora, en un Iphone 4, (teniendo una resolución de 640px de ancho) se escalará correctamente a 640px si uso "initial-scale = 1.0".

Alternativamente, si los gráficos son 480px, 3Gs requeriría una escala = .667 e iOS 4 requeriría 1.3, ¿correcto?

Entonces, ¿cómo lograr que el sitio encaje perfectamente de lado a lado? ¿Puede el navegador detectar el ancho del dispositivo y luego establecer la escala en consecuencia? Hay un montón de diferentes amplitudes de dispositivo por ahí ... androide, iphones mayores, de moras, etc.

Conseguir bastante frusterated :(siento como si estuviera perdiendo algo importante que yo ya debería saber.

Editar Parece que la metaetiqueta 'escala inicial' debería estar escalando el sitio en relación con la ventana gráfica y luego usar ancho = ancho del dispositivo para establecer el tamaño de la ventana gráfica.

El problema que parece tener es que la ventana gráfica no está escalando para adaptarse al dispositivo, se queda en 640px sin importar qué etiqueta use. ¿Qué me falta aquí?

Fuente

2011-08-22 Jonathan Coe

http://stackoverflow.com/questions/12723844/an droid-viewport-setting-user-escalable-no-breaks-width-zoom-level-of-viewpor/19430097 # 19430097 – Habib

Ok, he averiguado ... en esencia.

Dado que mi diseño es realmente 2 veces el tamaño de la ventana gráfica (más o menos), la clave es usar "escala inicial = 0,5". Funciona correctamente en ambos dispositivos (3Gs y 4), y más o menos correctamente en dispositivos Android, etc.

Es un poco complicado, y parece que debería haber una mejor manera de hacerlo, pero por el momento , funciona.

Gracias a todos los que proporcionaron entrada.

Fuente

2011-09-30 16:38:53

Tuve el mismo problema y usé la misma solución exacta ... Me pregunto si alguna vez encontraste una mejor manera de manejarlo. esto? – jac300

Llegando aquí a finales de 2015 y me pregunto lo mismo. ¿Sigue siendo la mejor solución? Me funcionó, pero se siente sucio. En mi caso Usé 0.67. Creo que la escala debería ser diferente según la densidad de píxeles del dispositivo. Esto se siente mal, pero nada más funciona mejor. – Spencer

Creo que la respuesta es que desea decirle al navegador web que siempre escale el sitio a 640 píxeles. Incluso desactivé la capacidad de los usuarios de escalar el sitio para que los arrastres parciales no cambien el tamaño de todo.

Prueba esto:

<meta name="viewport" content="width=640; user-scalable=no;" />

Fuente

2011-08-22 20:02:16 profMobi

Se intentó ... no funciona ... literalmente, nada funciona en el campo 'ancho'. Intentó el ancho del dispositivo, intentó 640, intentó 320, nada cambia la escala del sitio. Solo la escala inicial hace cualquier cosa, pero eso es solo un dispositivo específico, por lo que no es de ayuda :( –

+15

Evitar que el usuario haga zoom en una página en un dispositivo móvil es muy anti-usabilidad. – TravisO

Usar un ancho de píxel fijo funcionó mejor para nosotros , pero no la función escalable. –

"ancho" es decirle al navegador qué ancho tiene su sitio web al 100% de zoom. si ha diseñado su sitio web para que sea fluido, puede especificar "ancho del dispositivo" aquí, y el navegador no necesitará usar ningún zoom, ya que su diseño está diseñado para adaptarse a cualquier ancho de ventana.

"escala inicial" es para anular el comportamiento predeterminado de algunos dispositivos para acercar o alejar su sitio web para que el ancho del sitio web (que ha especificado anteriormente) coincida con el ancho de la pantalla. al poner esto a 1 básicamente dice "no hacer zoom para esto, use barras de desplazamiento si mi sitio web es demasiado ancho para la pantalla, y deje espacio en blanco a los lados si es demasiado estrecho". si desea que su sitio web llene exactamente el ancho de la pantalla, no use la escala inicial.

Fuente

2011-11-09 12:21:21 londonwebguy

Creo que el problema principal con el mensaje original es que los puntos y comas no parecen funcionar en el iPhone 4+.Solo funciona con comas como separadores (o solo con la configuración del ancho del dispositivo). Otros navegadores parecen ser más tolerantes.

las siguientes obras fiable para mí:

<meta name="viewport" 
     content="width=device-width,initial-scale=1,maximum-scale=1" />

también querrá desactivar el cuerpo y en el documento de desplazamiento horizontal:

body, html 
{  
    overflow-x: hidden;   
}

buen enlace para obtener más información sobre Mozilla Sitio:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Fuente

2012-05-21 07:41:13

Usar esto, pero dejar fuera de escala inicial funcionó para mí. Estaba teniendo problemas con lo que sucedió cuando giré mi dispositivo. 'width = device-width, maximum-scale = 1, user-scalable = no", name: "viewport" ' –

Confundido en "escala inicial = 1.0" - iphone 3GS vs 4

Respuesta

Cuestiones relacionadas