2011-04-07 31 views
8

Estoy diseñando una versión móvil de mi sitio web, que debería ser como una aplicación móvil.Elemento html de sitio web móvil demasiado ancho

El problema es que hay un ancho extraño para mi elemento html en mi navegador móvil. He intentado configurar body y html al ancho: 480px; y el contenido es de 480px, pero incluso entonces hay una gran cantidad de espacios en blanco junto al contenido (estimado en aproximadamente 300 px). El efecto de esto también es que el sitio web no se acerca al contenido sino al contenido + el espacio en blanco y primero tiene que acercarse para usar el sitio web correctamente.

Por supuesto, quiero usar ancho: 100%; por lo que rinde bien en diferentes tamaños de pantalla.

¿Alguien sabe lo que está pasando o cómo solucionarlo?

Editar El código html es simplemente directo xhtml de transición, nada especial. En el css tengo:

body, html { 
width:480px !important;} 

Pero si no pudiera establecer un ancho para los que debería funcionar ¿no? Tampoco establezco un ancho para ningún otro elemento (excepto botones como 100px y cosas por el estilo) y si veo la versión móvil en mi computadora, ningún elemento parece ser más ancho que el cuerpo.

+0

¿Podría incluir algún código? ¿Tal vez un ejemplo en jsfiddle? – quarkdown27

+0

Hecho, edité mi publicación. – Thomas

Respuesta

19

¿Ha agregado la metaetiqueta viewport?

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
+2

¡Brillante, funciona! ¡Muchas gracias! – Thomas

+0

Hola muchas gracias. He estado buscando esto –

+0

No estaba buscando este comando específicamente. Pensé que era un problema de hoja de estilo. Puse el comando y bang. arregla mi cuerpo ancho con barras de desplazamiento para ajustarme al ancho real de mi página. –

Cuestiones relacionadas