HTML/CSS - Móvil ampliado al inicio

Tiene un problema donde todos los dispositivos móviles se amplían al 50% al inicio. Eso es todo dispositivo que no sea iPad. Intenté hacer una comprobación de PHP para escalar el 50% fuera de iPad, pero cuando se movió desde el paisaje -> retrato -> paisaje, entonces escalaría el 50% una vez más.HTML/CSS - Móvil ampliado al inicio

Aquí está mi meta tags actuales:

<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

Mi HTML no utiliza ningún ancho de 100% sólo en px. En general, el contenido no se extiende a 640 de ancho y 700 de alto.

¿Alguien tiene alguna idea de cómo podría evitar este problema?

Editar

llegó a la conclusión de que @hakre tenía razón en la escala de los píxeles. Mi solución fue establecer cada ancho en% en lugar de px. De esta forma, el tamaño de auto no importa qué. Una cosa a tener en cuenta es que eliminé la balanza. La razón de por qué es que parece estropear el diseño en algunos dispositivos. Gracias de nuevo @hakre

Fuente

2011-12-19 Dannie Hansen

Hay algunos elementos de respuesta aquí: http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on- a-mobile-web-page –

Yer, iba a decir ' ' pero su enlace tiene este –

No, esa no es la respuesta. Entonces simplemente no permite que el usuario escale la página. Pero como cada dispositivo en mi edificio establece la escala automáticamente sin ninguna interacción del usuario, esta no es la solución. Gracias por probar de todos modos :) –

En CSS, el px es un absolute length unit. Son principalmente útiles cuando se conoce el entorno de salida.

Para un dispositivo de CSS, estas dimensiones están bien anclado (i) relacionando las unidades físicas [in, cm, mm, pt, pc] a sus mediciones físicas, o (ii) relacionando la unidad de píxel [px] al píxel de referencia. [adiciones y destacado por mí]

Si el píxel referencia es la mitad de píxel físico del dispositivos de visualización de un valor CSS de 700px traducirá ser 350 píxeles en la pantalla - o dicho 50% en su pregunta.

Entonces, lo que experimentas aquí es totalmente correcto, el CSS es correcto en el sentido de que elijas px unidades, solo has perdido que un px en CSS no es lo mismo que el píxel en la pantalla. Como no es pero lo quieres, parece que has elegido la unidad incorrecta.

De nuevo: longitud absoluta unidades son principalmente útiles cuando se conoce el entorno de salida.

Quizás encuentre una manera de decirle al navegador que modifique píxel de referencia? Esto resolvería tu problema. O bien, como ya sabe lo que sucede, detecte el dispositivo y cambie las longitudes según corresponda.

Como alternativa puede reemplazar sus longitudes absolutas con las relativas (em, ex). Como son relativos, solo necesita cambiar la longitud del elemento con el que están relacionados para cambiar toda la página.

Esto se hace comúnmente usando una longitud absoluta en el elemento <html> y/o <body> y longitudes relativas para todo lo demás.

Este enfoque también podría ayudarlo a resolver el problema.

Fuente

2011-12-19 14:48:49 hakre

No, ese no es el problema. El problema es que la carga de los navegadores móviles se acerca al 50%. Luego puede alejarse, pero el ancho/alto de los elementos es completamente correcto. Una posible solución sería hacer que se aleje al principio o que no se amplíe. Gracias por la escritura, pero ya sabía que :) Mi problema es simplemente que parece estar en un estado de zoom en carga. La visualización de los elementos es correcta. –

Solo otra entrada. Ya se ha establecido el ancho para todos los elementos y ninguno de ellos amplía este ancho. Gracias una vez más por intentarlo. –

¿El * zoom * es una propiedad de CSS en su caso? Si es así, ¿puedes pegar la hoja de estilo del cliente? Además, ¿tiene conocimiento de [CSS Device Adaptation] (http://dev.w3.org/csswg/css-device-adapt/)? Es posible que necesite usar un módulo específico del proveedor para eso, todavía es un borrador. – hakre

Solo he probado esto en el navegador predeterminado de Android y Opera Mobile, pero parece funcionar bien. Aún no hay manera de desactivar el zoom en el navegador de Android por desgracia ...

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>

Fuente

2012-01-06 08:11:28 EpicMedia

HTML/CSS - Móvil ampliado al inicio

Respuesta

Cuestiones relacionadas