当我在平板电脑上更改视图时，为什么我的宽度和高度会发生变化？

Question

我的应用程序仅用于横向视图，我需要的是当它在肖像上时它将旋转并向我显示横向视图，以便我可以强制用户在横向上查看应用程序。虽然我有问题，但我现在很困惑。也许我没有看到问题。

var mql = window.matchMedia("(orientation: portrait)");

var all = document.getElementById("slider-view");

var winWidth            = 0;
var winHeight           = 0;        

// If there are matches, we're in portrait
if(mql.matches) {  
    // Portrait orientation
    $(all).addClass('portrait-transform');

    $(all).css('height', window.innerWidth);
    $(all).css('width', window.innerHeight);
    $(all).css('top', (window.innerHeight - window.innerWidth) / 2);
    $(all).css('left', (window.innerWidth - window.innerHeight) / 2);

    winWidth            = window.innerHeight;
    winHeight           = window.innerWidth; 

    alert('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));                 

} else {  
    // Landscape orientation
    $('#slider-view').removeClass('portrait-transform');  

    all.style.height = window.innerHeight + "px";
    all.style.width = window.innerWidth + "px";

    winWidth            = window.innerWidth;
    winHeight           = window.innerHeight;

    alert('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));                 

}

// Add a media query change listener
mql.addListener(function(m) {
    if(m.matches) {
        // Changed to portrait
        $(all).addClass('portrait-transform');

        $(all).css('height', window.innerWidth);
        $(all).css('width', window.innerHeight);
        $(all).css('top', (window.innerHeight - window.innerWidth) / 2);
        $(all).css('left', (window.innerwidth - window.innerheight) / 2);

        alert('height '+ $(all).css('height')+' width '+$(all).css('width')+' top '+$(all).css('top')+' left '+$(all).css('left'));                 


    }
    else {
        // Changed to landscape
        $(all).removeClass('portrait-transform');

        $(all).css('height', window.innerWidth);
        $(all).css('width', window.innerHeight);
        $(all).css('top', 0);
        $(all).css('left', 0);          

        var winWidth            = window.innerWidth;
        var winHeight           = window.innerHeight;

    }
});

我有这个用于css

.portrait-transform {
/* portrait-specific styles */
-webkit-transform: rotate(90deg); /* WebKit */
-webkit-transform-origin: 50% 50%;
-moz-transform: rotate(90deg); /* Mozilla */
-moz-transform-origin: 50% 50%;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: 50% 50%;
-ms-transform: rotate(90deg); /* Internet Explorer */
-ms-transform-origin: 50% 50%;
transform: rotate(90deg); /* CSS3 */    
transform-origin: 50% 50%;  

}

我需要帮助才能理解为什么在更改视图时我的高度和宽度值会发生变化。