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();
        }
    }
}