Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/07/2011, 16:34
Avatar de PosProdukcion
PosProdukcion
 
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 19 años, 5 meses
Puntos: 9
Ancho del documento (Firefox)

Hola, estoy intentando detectar la resolución de pantalla para detectar el tipo de dispositivo del cleinte, lo normal sería hacerlo con screen.width PERO como no tengo un smartphone y trabajo con un emulador de iPhone, screen.width me da el tamaño de la pantalla del ordenador, entonces intento detectar el ancho de la ventana (o del documento) con esta función:

Código Javascript:
Ver original
  1. //Obtiene las dimensiones de la pantalla (de momento, solo el ancho)
  2.     function getViewSize()
  3.     {
  4.         var viewportwidth;
  5.         var viewportheight;
  6.        
  7.         // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  8.         if (typeof window.innerWidth != 'undefined')
  9.         {
  10.             //viewportwidth = window.innerWidth;
  11.             viewportwidth = window.innerWidth;
  12.             viewportheight = window.innerHeight;
  13.             alert('1 ' + viewportwidth);
  14.         }
  15.        
  16.         // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  17.        
  18.         else if (typeof document.documentElement != 'undefined'
  19.          && typeof document.documentElement.clientWidth !=
  20.          'undefined' && document.documentElement.clientWidth != 0)
  21.         {
  22.            viewportwidth = document.documentElement.clientWidth;
  23.            viewportheight = document.documentElement.clientHeight
  24.             alert('2 ' + viewportwidth);
  25.         }
  26.         // older versions of IE
  27.         else
  28.         {
  29.            viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
  30.            viewportheight = document.getElementsByTagName('body')[0].clientHeight
  31.             alert('3 ' + viewportwidth);
  32.         }
  33.        
  34.         return viewportwidth;
  35.      }

Pues la función funciona bien para todos los navegadores y CASI todas las resoluciones, porque para firefox, a tamaños grandes da el tamaño correcto, pero por ejemplo para una ventana de 480px de ancho (exactos) da un valor de 560px, en realidad el menor valor que llega a mostrar es 560px, aunque encoja la ventana a valores inferiores siempre da ese. ¿¿Alguien sabe como solucionarlo??

Para redimensionar la ventana utilizo el plugin WebDeveloper de Firefox y un <HR> con ancho exacto para medir.

Gracias, un saludo