Dizque

Estoy preparando un precioso script, para próxima publicación, que permite la aplicación automágica de diferentes hojas de estilo según el tamaño de la ventana del navegador.

Y he aquí que he topado con un problema: ¿cómo demonios averiguo las dimensiones de la ventana en uso? Tomo el camino fácil y me dirijo a Quirksmode, uno de mis sitios de referencia cuando se trata de resolver diferencias entre las distintas implementaciones de javascript.

Doy con la página que contiene la información que busco, Viewport properties, y armo esta funcioncilla:

function getViewportSize() {
    var x, y;
    if (self.innerHeight) { // MOS
        y = self.innerHeight;
        x = self.innerWidth;
    } else if (document.documentElement && document.documentElement.clientWidth) { // IE6 Strict
        x = document.documentElement.clientWidth;
        y = document.documentElement.clientHeight;
    } else if (document.body.clientHeight) { // IE quirks
        y = document.body.clientHeight;
        x = document.body.clientWidth;
    }
    return {x: x, y: y};
}

Debería funcionar y funciona. Pero los resultados son inconsistentes: a una resolución de pantalla de 1024×768 píxeles, obtengo los siguientes resultados (para getViewportSize().x):

Navegador | Tamaño ——————|————- Internet Explorer | 1003 píxeles Mozilla Firefox | 1024 píxeles Opera | 1018 píxeles

Estas diferencias no hay quien las entienda, madre. Gugleo un poquito y doy con esta conversación en How to create, donde leo:

In the mean time, if you desperately need the true size of the window, create an empty absolutely positioned element, and set its ‘right’ style to ‘0′ and do not define the left position. Make sure it has no padding or margins or border, and set its ‘width’ to (for example) ‘10px’.

Then use:

var theDiv = document.getElementById('idOfDiv');
var theWidth = theDiv.offsetLeft + theDiv.offsetWidth;

Así que pruebo este método, doy el experimento por bueno y escribo la siguiente función:

function getViewportWidth() {
    var helper;
    if (null == (helper = document.getElementById('styleSwapHelper'))) {
        var helper = document.createElement('div');
        helper.style.position = 'absolute';
        helper.style.margin = '0';
        helper.style.padding = '0';
        helper.style.right = '0';
        helper.style.width = '10px';
        document.getElementsByTagName('body')[0].appendChild(helper);
    }
    return helper.offsetLeft + 10;
}

Quedo a la escucha por si alguien tiene una idea mejor.