Переменная javascript и экран мультимедиа - PullRequest
Новая
       13

Переменная javascript и экран мультимедиа

0 голосов
/ 10 ноября 2011

Я только что понял, что мой план не будет работать с более ранним вопросом . Поэтому мне нужен совет.

Я использую переменную 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>

Любой совет будет очень здорово, спасибо!

Josh

UPDATE

Вот еще один метод, который я попробовал, но до сих пор не могу заставить его работать ... 

    $(".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");

                }
            }
        }

1 Ответ

0 голосов
/ 11 ноября 2011

Я чувствую, что вы можете решить эту проблему с помощью css: 

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

и тогда вы можете расположить свои расширяющиеся меню абсолютно: 

#menu{position:absolute,top:0}

с полем для содержимого под меню 

#content{margin-top:50px}

конечно, это поможет увидеть HTML, который вы используете. Высота документа должна соответствовать высоте содержимого. Вы не должны устанавливать его с помощью JavaScript.

...