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

Попробуйте следующие вместо $ (окно) .resize (функция() {}

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