2011-08-16 6 views
6

Cuando visitas una página web en tu teléfono (estoy usando Android) si es una página normal, se contrae para que quepa en la pantalla de tu teléfono.¿Cómo hacer que una página web móvil no se reduzca?

Siempre asumí que la forma de hacer una página móvil era hacer que la página fuera lo suficientemente pequeña como para caber completamente en la resolución de la pantalla del teléfono sin reducirla.

Esto no está pasando sin embargo. Incluso configuré específicamente el tamaño de mi página en body{ width: 300px;}, aún cuando lo cargue en mi teléfono, se encoge en la esquina superior izquierda con mucho espacio libre a su alrededor.

¿Qué estoy haciendo mal?

+0

he respondido a esta pregunta antes: http://stackoverflow.com/questions/2977550/iphone-safari- css-rotation-bug/3188736 # 3188736 –

Respuesta

9

Es necesario utilizar la etiqueta meta ventana

<!doctype html> 
<html> 
<head> 
    <title>Hello world!</title> 

    <meta name="viewport" content="width=device-width"/> 
</head> 

<body> 

<p>Hello world!</p> 

</body> 
</html> 

Leer en detalle aquí http://davidbcalhoun.com/2010/viewport-metatag

+0

¡Gracias que lo corrige! :) –

+0

Buena respuesta, pero aún así no muestra las páginas web en su tamaño real. 1 píxel en la página web es en realidad 1.5 píxeles en la pantalla del móvil. – trusktr

0

Esto se debe a que el ancho del cuerpo está relacionado con el dispositivo de exploración.

La mayoría de los teléfonos modernos simulan un navegador de escritorio, por lo que un ancho de 300px es 300px en relación con la ventana general del navegador. Básicamente, verá lo mismo en su navegador de escritorio que en el navegador de su teléfono.

Lo ideal es mostrar algo ligeramente diferente a los usuarios de dispositivos móviles. Por lo general, una versión reducida de la página que tiene elementos de menú más grandes y oculta gran parte del contenido habitual que no es necesario. (encabezado elegante, etc.).

Cuestiones relacionadas