Получение размера видового экрана пользователей в ems

Question

EDIT
Следующий код получает размер em, но не соответствует моему css.

function doOnOrientationChange() { 
     // Orientation of device has changed, change the size of map and move the maphelp (if required) 
     var eminpx = $("#1em").width(); 
     var largescreeninpx = eminpx*66.236; 
     switch(window.orientation) { 
      case -90: 
      case 90: 
       // Orientation is landscape 
       console.log('66.236ems in px: ' + largescreeninpx + '. Screen width: ' + screen.height); 
       $("#map").height(screen.width*0.7); // The screen width is the viewport height of the device because we're in landscape orientation 
       // Will only work if we can actually get the em value of the width 
       if (screen.height < largescreeninpx) { 
        // Small or medium screen, show map help below map 
        console.log('small screen'); 
        $("#maphelp").css('margin-top', 0); 
       } else { 
        // Larger screen, show map and map help side-by-side 
        $("#maphelp").css('margin-top', -screen.width*0.7); 
       } 
       break; 
      default: 
       // Orientation is portrait 
       alert('66.23ems in px: ' + largescreeninpx + '. Screen width: ' + screen.width); 
       $("#map").height(screen.height*0.7); 
       // Will only work if we can actually get the em value of the width 
       if (screen.width < largescreeninpx) { 
        // Small or medium screen, show map help below map 
        $("#maphelp").css('margin-top', 0); 
       } else { 
        // Larger screen, show map and map help side-by-side 
        $("#maphelp").css('margin-top', -screen.height*0.7); 
       } 
       break; 
     } 
    } 

Хотя в CSS пейзаж IPad не будет вызывать @media screen and (min-width: 30em) and (max-width: 63.236em) {...} (то есть он имеет ширину более 63.236ems), в JS это вызывает console.log('small screen'), показывая, что имеет ширину экрана менее 66.236ems при получении через JS?

Оригинальный вопрос (довольно много ответил) Я пытаюсь создать веб-сайт вокруг «The Goldilocks Approach». Все работает отлично в листах распространения, но я пытаюсь динамически установить высоту встроенной карты, чтобы она всегда составляла 90% от текущей высоты видового экрана пользователей. Тем не менее, рядом с картой может также быть некоторая «подсказка карты», разрешающая окно просмотра браузера достаточно велико (в данном случае 66.23 мс. IPad в портрете более 66.23мс). Ниже мой код, который прокомментирован, чтобы показать, что не работает.

function doOnOrientationChange() { 
     // Orientation of device has changed, change the size of map and move the maphelp (if required) 
     switch(window.orientation) { 
      case -90: 
      case 90: 
       // Orientation is landscape 
       $("#map").height(screen.width*0.9); // The screen width is the viewport height of the device because we're in landscape orientation 
       if ($(window).width() > 66.23) { // Need this in ems 
        // Small or medium screen, show map help below map 
        $("#maphelp").css('margin-top', 0); 
       } else { 
        // Larger screen, show map and map help side-by-side 
        $("#maphelp").css('margin-top', -screen.width*0.9); 
       } 
       break; 
      default: 
       // Orientation is portrait 
       if ($(window).width() < 66.23) { // Need this in ems 
        // Small or medium screen, show map help below map 
        $("#maphelp").css('margin-top', 0); 
       } else { 
        // Larger screen, show map and map help side-by-side 
        $("#maphelp").css('margin-top', -screen.height*0.9); 
       } 
       break; 
     } 
    } 

Итак, мой вопрос: как я могу заставить его вызвать правильный ответ, проверив ems?

Answer 1

Просто научиться конвертировать между Эмс пикселей должны получить, где вы должны пойти:

https://stackoverflow.com/a/1463032/50358 хороший ответ на этот вопрос: What is the relationship between ems and pixels?