query - responsive html
Confundido en “initial-scale=1.0”-iPhone 3GS vs 4 (4)
"ancho" es para decirle al navegador qué tan ancho es su sitio web al 100% de zoom. si ha diseñado su sitio web para que sea fluido, puede especificar el "ancho del dispositivo" aquí, y el navegador no tendrá que usar ningún zoom, ya que su diseño está diseñado para ajustarse al ancho de la ventana gráfica.
"escala inicial" es para anular el comportamiento predeterminado de algunos dispositivos para acercar o alejar su sitio web, de modo que el ancho del sitio web (que usted especificó anteriormente) coincida con el ancho de la pantalla. establecer esto en 1 básicamente dice "no haga zoom para esto, use las barras de desplazamiento si mi sitio web es demasiado ancho para la pantalla, y deje un espacio en blanco a los lados si es demasiado estrecho". Si quiere que su sitio web llene exactamente el ancho de la pantalla, no use la escala inicial.
Esta pregunta ya tiene una respuesta aquí:
Estoy teniendo algunos problemas para que mi sitio web se amplíe correctamente para dispositivos móviles.
Tenemos un sitio que está diseñado para tener un ancho mínimo de 640px, máximo de lo que sea. 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 en la que estoy confundido es que si uso "initial-scale = 1.0", obviamente el sitio tendrá una escala de 1: 1, y se verá horrible en un iPhone 3G (solo verá la mitad del sitio). Ahora, en un Iphone 4, (con 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, los 3G requerirían una escala = .667 y el iOS 4 requeriría 1.3, ¿correcto?
Entonces, ¿cómo lograr que el sitio se ajuste perfectamente de borde a borde? ¿Puede el navegador detectar el ancho del dispositivo y luego configurar la escala en consecuencia? Hay muchos anchos de dispositivos diferentes por ahí ... Android, iPhones más viejos, Blackberry, etc.
Conseguir bastante frustrado :( Siento que me estoy perdiendo algo importante que ya debería saber.
Editar Parece que la metaetiqueta de ''escala inicial'' debería escalar el sitio en relación con la ventana gráfica, luego usar width = device-width para establecer el tamaño real de la ventana gráfica.
El problema que parece tener es que la ventana gráfica no se adapta al dispositivo, se queda en 640px sin importar qué etiqueta use. ¿¿¿Que me estoy perdiendo aqui???
Creo que el principal problema con el mensaje original es que los puntos y coma no parecen funcionar en el iPhone 4+. Solo funciona con comas como separadores (o solo la configuración de ancho del dispositivo). Otros navegadores parecen ser más tolerantes.
Los siguientes trabajos confiablemente para mi:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
También deseará desactivar el cuerpo y el documento para que no se desplacen horizontalmente:
body, html
{
overflow-x: hidden;
}
Buen enlace para más información en el sitio de Mozilla:
Creo que la respuesta es que quiere decirle al navegador web que siempre debe escalar el sitio a 640 píxeles. Incluso desactivaría la capacidad de los usuarios de escalar el sitio para que los arrastres extraviados no redimensionen todo.
Prueba esto:
<meta name="viewport" content="width=640; user-scalable=no;" />
Ok, lo he descubierto ... esencialmente.
Debido a que mi diseño es en realidad 2 veces el tamaño de la ventana gráfica (más o menos), la clave es usar la "escala inicial = 0.5". Funciona correctamente en ambos dispositivos (3G y 4), y más o menos correctamente en dispositivos Android, etc.
Algo complicado, y parece que debería haber una mejor manera de hacerlo, pero por el momento, funciona.
Gracias a todos los que proporcionaron información.