javascript變量和媒體屏幕

我剛剛意識到我的計劃不會與早期的question一起使用。所以我需要一些建議。javascript變量和媒體屏幕

我使用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>

任何建議將是最真棒謝謝！

喬希

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"); 

       } 
      } 
     }

來源

2011-11-10 Joshc

如果包裝需要全寬度/高度，爲什麼不只是將CSS寬度和高度設置爲100％？ –

我已經在包裝器中展開了菜單，如果它是100％擴展包裝器，我需要每次包裝在瀏覽器寬度固定。另外我也需要固定的高度。 – Joshc

html，body，＃wrapper {width：100％; height：100％; overflow：hidden;} – Gerben

我覺得你可以使用這個解決css：

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

個，然後你可以定位你的菜單擴展絕對：

#menu{position:absolute,top:0}

與菜單

#content{margin-top:50px}

當然，這將有助於看到你正在使用的HTML以下內容的餘量。文檔的高度通常應該是內容的高度。你不應該用javascript來設置它。

來源

2011-11-11 00:38:43

感謝兄弟，我是這樣一個人！乾杯 – Joshc

javascript變量和媒體屏幕

回答

相關問題