javascript - 所有设备上的旋转和调整

Question

我遇到的问题是：我正在使用 HTML5、JavaScript 和 CSS3 制作应用程序。我的想法是它可以在任何计算机和平板电脑上使用（之后可能还会包括智能手机），并且它必须适合任何尺寸。我尝试使用“媒体查询”，但是当我旋转设备（从水平到垂直，反之亦然）时不合适。我尝试使用此功能，但最终没有工作：

/*SCRIPT PARA TAMANIO DE LA VENTANA*/ 
    window.onload=function() 
    {    
        dameElTamanioDePantalla(); 
    }

    function dameElTamanioDePantalla () 
    {
        setTimeout(function() { window.scrollTo(0,1); }, 10); 
        var alto = document.height; 
        var ancho = document.width; 
        document.getElementById('barraSuperior').style.width = "100%"; 
        document.getElementById('barraSuperior').style.height = ((alto*0.05).toString()).concat("px"); 
        document.getElementById('barraInferior').style.width = "100%"; 
        document.getElementById('barraInferior').style.height = ((alto*0.05).toString()).concat("px"); 
        document.getElementById('contenidoPrincipal').style.width = "95%"; 
        document.getElementById('contenidoPrincipal').style.height = ((alto*0.9).toString()).concat("px");
    }

    /*SCRIPT QUE DETECTA Y CAMBIA EL MEDIA QUERY SI CAMBIA DE LANDSCAPE A PORTRAIT*/

    detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
    if(typeof window.onorientationchange != 'undefined'){
        if ( orientation == 0 ) {
             //Do Something In Portrait Mode
            dameElTamanioDePantalla();
        }
        else if ( orientation == 90 ) {
             //Do Something In Landscape Mode
            dameElTamanioDePantalla();
        }
        else if ( orientation == -90 ) {
             //Do Something In Landscape Mode
            dameElTamanioDePantalla();
        }
        else if ( orientation == 180 ) {
             //Do Something In Landscape Mode
            dameElTamanioDePantalla();
        }
    }
}