Question

我刚刚意识到我的计划不适用于之前的question。所以我需要一些建议。

我正在使用javascript变量来获取所有浏览器的宽度和高度。

var viewportwidth;
var viewportheight;

我和我正在将这些变量应用到我的<div id="wapper"></div>，就像这样......

$("#wrapper").css({
    "width": viewportwidth + 'px !important',
    "height": viewportheight + 'px !important'
});

但我也在使用@media屏幕在我的css设备上进行方向更改。

我需要将这些变量放入其中，但是我不确定是否最好将整个事物输出为javascript / jquery，或者是否有另一种方法将变量添加到CSS中

<style>

    #wrapper {
        width: viewportheight ;
        height: viewportwidth ;
    }

    /* Landscape */
    @media screen and (orientation:landscape) {

        #wrapper {
            width: viewportwidth !important;
            height: viewportheight !important;
        }

    }

    /* Portrait */
    @media screen and (orientation:portrait) {

        #wrapper {
            width: viewportheight !important;
            height: viewportwidth !important;
        }

    }

</style>

任何建议都会非常棒！谢谢。

约什

更新

这是我尝试的另一种方法，但仍然无法使其正常工作......

    $(".portrait").css({
        "width": viewportwidth + 'px !important',
        "height": viewportheight + 'px !important'
    });

    $(".landscape").css({
        "width": viewportheight + 'px !important',
        "height": viewportwidth + 'px !important'
    });

    detectOrientation();
        window.onorientationchange = detectOrientation;
        function detectOrientation(){
            if(typeof window.onorientationchange != 'undefined'){
                if ( orientation == 0 ) {

                    //Do Something In Portrait Mode
                    $("#wrapper").removeClass("landscape").addClass("portrait");

                }
                else if ( orientation == 90 ) {

                    //Do Something In Landscape Mode
                    $("#wrapper").removeClass("portrait").addClass("landscape");

                }
                else if ( orientation == -90 ) {

                    //Do Something In Landscape Mode
                    $("#wrapper").removeClass("portrait").addClass("landscape");

                }
                else if ( orientation == 180 ) {

                    //Do Something In Portrait Mode
                    $("#wrapper").removeClass("landscape").addClass("portrait");

                }
            }
        }

Answer 1

我觉得你可以用css解决这个问题：

html,body,#wrapper{width:100%;overflow-x:hidden;}

然后您可以绝对定位扩展菜单：

#menu{position:absolute,top:0}

在菜单下方的内容上留有余量

#content{margin-top:50px}

当然有助于查看您正在使用的HTML。文档的高度通常应该是内容的高度。你不应该用javascript设置它。

javascript变量和媒体屏幕

1 个答案: