Tamaño ancho en dispositivos móviles

davidj · #1 (**permalink**) 12/04/2013, 09:20

Hola a todos,

Estoy realizando unas pruebas de maquetación CSS, HTML.. para móviles (android) y me he dado cuenta que el navegador tiene un comportamiento que no entiendo (cuando se encuentra en portraid), mejor pongo un ejemplo sencillo:

fichero1.html:
<BODY>
esto es una prueba realizada para comprobar el ancho de pantalla mirando el móvil en portraid
<br />
<a href="fichero2.html">IR AL FICHERO 2</a>
</BODY>

Este fichero simplemente mostrará un frase (en una línea) en el navegador mostrando "esto es una prueba realizada para comprobar el ancho de pantalla mirando el móvil en portraid"

Al pulsar iremos a este otro fichero (es el mismo código en otro fichero):

fichero2.html:
<BODY>
esto es una prueba realizada para comprobar el ancho de pantalla mirando el móvil en portraid
<br />
<a href="fichero1.html">VOLVER AL FICHERO 1</a>
</BODY>

En mi móvil (Samsung Galaxy S plus con android 2.3) al ir al fichero2.html y al volver al fichero1.html la frase se acorta de ancho y ya no me sale en una sola línea si no en tres, es decir, ya no me muestra:

esto es una prueba realizada para comprobar el ancho de pantalla mirando el móvil en portraid

Si no que me muestra:

esto es una prueba realizada para
comprobar el ancho de pantalla mirando el
móvil en portraid

¿ Alguien sabe por que pasa eso con el móvil (en modo portraid)?¿ Debería salir siempre en una sola línea nooo?

Gracias!!

Triby · #2 (**permalink**) 12/04/2013, 09:53

Cita:

Iniciado por davidj

¿ Debería salir siempre en una sola línea nooo?

No; a menos que tengas alguna especificación que haga que el texto se muestre en una sola línea (ancho, white-space, etc.) este se debe adaptar a la pantalla sin necesidad de acercar/alejar.

davidj · #3 (**permalink**) 12/04/2013, 10:14

Hola Triby,

Ya le puse un <div style="width: 700px">frase</div> y nada....

Lo curioso es que si el width es superior a 800px si que funciona bien, si es inferior sucede lo que he comentado, que raro..

Un saludo!

Triby · #4 (**permalink**) 12/04/2013, 14:06

Habría que ver completos tus códigos HTML + CSS para saber qué pasa ahí.

pzin · #5 (**permalink**) 12/04/2013, 16:58

¿No será un problema de zoom y viewport? ¿Tienes algo de esto especificado? Como comenta Triby, más código.

Un poco off-topic: ¿No se puede en Android usar el inspeccionar de elementos? Sé que conectando el iPad al ordenador se puede, desde el ordenador en Safari, usar el inspeccionar los elementos. ¿No hay algo así para Android?

davidj · #6 (**permalink**) 13/04/2013, 05:28

No tengo nada de viewport ni siquiera nada de CSS. Se trata de un fichero básico y sencillo HTML con el contenido del BODY como he comentado, nada más. Si aumento la web con los dedos y vuelvo a empequeñecer, entonces si se ve bien (todo en una línea). El código completo es: http://bpaste.net/show/543t62XmdK2sM8z14Esb/

El tema está en que si el fichero2 me muestra la frase en una sola línea:

esto es una prueba realizada para comprobar el ancho de pantalla mirando el móvil en portraid

por que puñetas al ir al fichero1 (que tiene exactamente el mismo código que fichero2, solo cambia el enlace) me sale así:

esto es una prueba realizada para
comprobar el ancho de pantalla mirando el
móvil en portraid

Ayuda!!!

Doy puntos para quien encuentre la respuesta

pzin · #7 (**permalink**) 13/04/2013, 05:45

Especifica pues el viewport y el zoom y verás que siempre se verá con los saltos de línea.

davidj · #8 (**permalink**) 13/04/2013, 06:01

Cita:

Iniciado por pzin

Especifica pues el viewport y el zoom y verás que siempre se verá con los saltos de línea.

Pero si hago esto los textos se verán más grandes no?, me interesa que se vea el texto "estandar", a pelo y si el usuario desea aumentar o diminuir (al máximo) que lo pueda hacer, es decir, deseo que se muestre como se muestra en un pc (si se ve muy pequeño en el móvil, pues que se vea muy pequeño) y saber por que pasa esto

davidj · #9 (**permalink**) 13/04/2013, 06:17

Por cierto, me he dado cuenta que si inserto el texto dentro de un DIV con WIDTH mayor a 800 px ya lo hace correctamente, sin embargo, si el DIV es inferior a 800px, me pasa lo que os he comentado (el móvil tiene resolución de 800x480). Se podría pensar que el div al ser menor que la resolución del dispositivo pasa eso pero otros dispositivos android con 1280 de resolución funciona bien con div inferior a 800px

pzin · #10 (**permalink**) 13/04/2013, 06:39

Cita:

Iniciado por davidj

Pero si hago esto los textos se verán más grandes no?

Si no especificas el nivel de zoom y sólo especificas el ancho no tiene porqué.

davidj · #11 (**permalink**) 13/04/2013, 08:09

umm esto ya lo probé pero no me funcionaba..