以ems獲取用戶視口大小

編輯
下面的代碼獲取em的大小，但不對應於我的css。以ems獲取用戶視口大小

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.23ems，縱向的iPad超過66.23ems）。下面是我的代碼，它被評論，以顯示什麼不工作。

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檢查正確的響應？

來源

2012-05-24 Joseph Duffy