Problemas con screen.width

xinxan22 · #1 (**permalink**) 04/06/2012, 04:35

Buenos días,
estoy intentando hacer una página web para un dispositivo móvil y tengo problemas con la resolución:

Estoy utilizando "screen.width" para saber el ancho y así cargar un fichero css (movil_1.css o movil_2.css ... )

Las siguientes resoluciones que tengo guardadas son las siguientes:

nokia 5800 xpress music --> 360 ancho

black berry --> 480 ancho

HTC (android) --> 800 ancho

IPHONE --> 320 ancho

Samsung Galaxy S --> 480 ancho

HUAWEI --> 800 ancho

Pues bien, la resolución que leo con "screen.width" no se parece en nada a la resolución de la pantalla, es decir, si en el HUAWEI (con el que hago las pruebas) pinto una tabla con width=800 se me pasa de la pantalla y no queda redimensionado.

Las especificaciones técnicas de este teléfono es de 320 píxeles de ancho ... entonces puede ser que "screen.width" no funcione correctamente?

Un saludo.

diamari · #2 (**permalink**) 04/06/2012, 05:25

Observa aquí:

http://stackoverflow.com/questions/8...r-screen-width

xinxan22 · #3 (**permalink**) 04/06/2012, 07:37

Por lo que he leído proponen es hacer un timeout para leer el ancho de la página una vez pasado ese tiempo ... lo tengo a 3 segundos ... y sigue diciendo 800px. Por lo que veo hay un bug en el Android que cualquier dispositivo tiene 800px ?

Como podría saber entonces el ancho real para poder cargar una hora de estilos a un dispositivo u otro ?

furoya · #4 (**permalink**) 04/06/2012, 08:31

Hola xinxan22, diamari :

No tengo Android para probar, pero me parece que ese código tiene un detalle.

Doy por descontado que entiendes de programación xinxan22, así que te describo lo que yo haría y tu , si te parece, lo escribes y ejecutas en cada teléfono que puedas; así nos sacamos la duda.

Allí dice

Código:

function getWidth()
  {
    xWidth = null;
    if(window.screen != null)
      xWidth = window.screen.availWidth;

    if(window.innerWidth != null)
      xWidth = window.innerWidth;

    if(document.body != null)
      xWidth = document.body.clientWidth;

    return xWidth;
  }

Cuando en realidad debería ser else if .

Si resulta que alguno mide el "ancho disponible" (que puede ser 300) y otro mide el "ancho total" (que puede ser 800), y pones éste último en el escript, te va a dar 800.

Prueba cada método por separado, uno en cada documento, y ve cuál te da los 300 o similar en Android. A ése lo metes primero, y no olvides los else if en el documento final, donde sí vuelves a poner todos juntos.

xinxan22 · #5 (**permalink**) 04/06/2012, 08:37

Hola,
los 3 por separado siguen dando 800, para ir bien deberían dar 320 en el dispositivo que estoy probando.

furoya · #6 (**permalink**) 04/06/2012, 11:34

Bueno, intenta con esto

no puedo redimensionar una imagen al 100% en android #3

Y si no anda, habrá que buscar un método que sea propietario en el sitio oficial del navegador que estés usando. O intentar antes con los conocidos outherWidth ; offsetWidth ; screen.width ; ... por si alguno de casualidad funciona.

emprear · #7 (**permalink**) 04/06/2012, 12:23

Pregunto? tu web está orientada a esos 6 modelos?
Yo me inclinaría trabajar con medidas relativas.
Confiar en el soporte de cada navegador para javascript es un dolor de cabeza

En todo caso yo probaría con esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Test tamaño pantalla</title>
<script type="text/javascript">
//<![CDATA[
function s(){
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
document.getElementById('s').innerHTML = winW + '-' + winH
}
//]]>
</script>
</head>
<body onload="s();">
<div id="s"></div>
</body>
</html>

que se acerca más a lo que dijo @furoya
Dado que en el movil no existe el redimensionamiento, vas a obtener el ancho del area visible, el height puede descartarse

Saludos

xinxan22 · #8 (**permalink**) 05/06/2012, 00:46

Emprear:

A que te refieres con los 6 modelos ?

Bueno he probado el código que me has propuesto y el resultado es width: 800 y height: 1003

Furoya:

He probado también con screen.width y también me da los 800 de width

He probado lo siguiente:

Código HTML:

<html>
<head>
<script language="javascript">
function getSize()
{
	var width = window.screen.width;
	var height = window.screen.height;
	document.write("Width: " + width + " Height: " + height);
}
setTimeout(getSize(), 200);
</script>
</head>
<body style="font-size:200%;"></body>
</html>

También sale width: 800 y height: 1003

xinxan22 · #9 (**permalink**) 05/06/2012, 00:48

Vale ya lo tengo ...

Furoya, con el meta que me has enviado:

Código HTML:

<meta name="viewport" content="initial-scale=1.0, user-scalable = no"/>

y el código que estaba utilizando:

Código HTML:

<html>
<head>
<script language="javascript">
function getSize()
{
	var width = window.screen.width;
	var height = window.screen.height;
	document.write("Width: " + width + " Height: " + height);
}
setTimeout(getSize(), 200);
</script>
</head>
<body style="font-size:200%;"></body>
</html>

Es decir ... este código me da el width:320 y height:401 que es la resolución del telefono :

Código HTML:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable = no"/>
<script language="javascript">
function getSize()
{
	var width = window.screen.width;
	var height = window.screen.height;
	document.write("Width: " + width + " Height: " + height);
}
setTimeout(getSize(), 200);
</script>
</head>
<body style="font-size:200%;"></body>
</html>

Muchas gracias :)