0

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')ます。

元の質問 (ほぼ回答済み) " The Goldilocks Approach " に関する Web サイトを作成しようとしています。すべてがスプレッドシートでうまく機能しますが、埋め込みマップの高さを動的に設定して、常にユーザーの現在のビューポートの高さの 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をチェックインして正しい応答をトリガーするにはどうすればよいですか?

4

2 に答える 2

-1

em とピクセルの間の変換を学ぶだけで、必要な場所にたどり着くはずです。

https://stackoverflow.com/a/1463032/50358は、この質問に対する良い答えです: ems とピクセルの関係は何ですか?

于 2012-05-24T22:23:34.270 に答える