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

虽然在 CSS 中, 景观iPad 不会触发 < code> 媒体屏幕和( 微宽: 30em) 和( 最大宽度: 63. 236em) {... @ {%/ code> (意指其宽度超过 63. 236ems), 但在 JS 中, 它触发 < code > conole.log( 小屏幕) , 显示在通过 JS 时屏幕宽度小于 66. 236em?

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

所以,我的问题是,我怎样才能通过检查Ems 来触发正确的反应呢?

Answer 1

简单的学习在 ems 和像素之间转换, 应该能让你到达你需要去的地方:

https://stackoverflow.com/a/1463032/50358>>>

Answer 2

创建以下宽度 :

<span id="one_em">M</span>

CSS 像这样 :

#one_em {
    display:none;
    width: 1em;
}

然后使用 jquery 获取# one_ em 元素的宽度。

const emWidth = $("#one_em").width();

注意 : 使用 1 em 作为 id 使某些浏览器无法正确连接 CSS, 作为有效的 HTML 4 < code> id 必须从字母开始。使用 < code> M < /code >, 宽度实际上为 M 宽。

友情链接