Question

EDIT
The follow code gets the size of an em, but is not corresponding to my 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;
        }
    }

Although in CSS a landscape iPad will not trigger @media screen and (min-width: 30em) and (max-width: 63.236em) {...} (meaning it has a width of over 63.236ems), in the JS it triggers the console.log('small screen'), showing it has a screen width of less than 66.236ems when getting via JS?

Original Question (pretty much answered)
I’m trying to create a website around “The Goldilocks Approach“. Everything works great in the spread sheets, but I’m trying to dynamically set the height of an embedded map so that it is always 90% of the users current viewport height. However, next to the map could also be some “map help”, permitting the browser viewport is large enough (in this case, 66.23ems. An iPad in portrait is over 66.23ems). Below is my code which is commented to show what is not working.

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

So, my question is, how can I get it to trigger the correct response by checking in ems?

Answer 1

Simply learning to convert between ems and pixels should get you where you need to go:

https://stackoverflow.com/a/1463032/50358 is a good answer to this question: What is the relationship between ems and pixels?