IE11（Windows Phone 8.1）不感应（显示尺寸）屏幕旋转？

Question

我正在使用 bootstrap 和 jquery 创建一个网站，并且我正在为桌面/移动设备测试它。通过javascript我不得不修改DOM中的一些元素，否则布局会太乱。 将我的 Lumia 735 (WindowsPhone 8.1 GDR1) 与 IE11 一起使用时，我注意到浏览器并没有真正“感知”到屏幕旋转。 为此，我在页面中添加了一个简单的代码（如下），并尝试在两个方向上多次加载和重新加载页面，但只显示纵向尺寸

<div id="screenDimensions"></div>

<script>
/*set of parameters*/
var screenHeight =
    window.screen.height;
var screenWidth = 
    window.screen.width; 

/*creation of the function that shows you the screen dimensions*/
function writeDimensions(){
/*change of the values in the parameters*/
    screenHeight =
        window.screen.height;
    screenWidth = 
        window.screen.width; 

    /*change of the content of the div screenDimensions*/
    document.getElementById('screenDimensions').innerHTML=
    ("<strong>width: " 
            +screenWidth 
            +", height: "
            +screenHeight
            +"</strong>" 
            );
}

/*execute the function once when the page is ready*/
$(document).ready(function(){
    writeDimensions();
})

/*and do it again when you sense a resize in the browser dimensions*/
$(window).resize(function(){
        writeDimensions();
    })
</script>

我的问题是：有没有办法让浏览器（在移动设备/平板电脑上）感知旋转？不然有没有办法优化小屏布局？

编辑。经过进一步测试，我发现 CSS 可以感知到旋转（参见以下代码），但 Javascript（也已如上所述更新）仍然无法正常工作。

在我添加的页脚中（这样一来，当您旋转屏幕时，您将始终拥有一个应该改变颜色的彩色条）

<div id="testdiv">
    <strong>Color case</strong>
</div>

使用以下 CSS 规则：

#testdiv{
    background-color:#3399FF; //blue, default colour
}

@media only screen and (max-width:1080px){
    #testdiv{
        background-color:#99FF99; //light green
    }
}
@media only screen and (max-width:768px){
    #testdiv{
        background-color:#CC00CC; //purple
    }
}
@media only screen and (max-width:600px){ //random value
    #testdiv{
        background-color:#00CC00; //green
    }
}
@media only screen and (max-width:450px){ //random value
    #testdiv{
        background-color:#996633; //brown
    }
}

问题和以前一样，我添加了这个：在桌面上上面的javascript可以工作，在手机上没有。相反，CSS 应该可以正常工作。为什么？

Answer 1

尝试跟随而不是 $(window).resize(function(){}

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

// If there are matches, we're in portrait
if(mql.matches) {  
   // Portrait orientation
 } else {  
  // Landscape orientation
 }

 // Add a media query change listener
  mql.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
  }
  else {
    // Changed to landscape
  }
 });