Javascript將瀏覽器視口大小輸出到body CSS

Question

我使用Andy Langton javascript來獲取我的veiwport大小。如果您還沒有聽說過，請參閱下面的鏈接。

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

腳本工作，但我不知道怎麼樣了讓腳本輸出的「寬度」和「高度」進入我的身體CSS的最佳方式，或與此有關的任何其他CSS選擇器。

見我的跛腳嘗試以下，但我想我會錯了jQuery中

<script> 

    <!-- 

    var viewportwidth; 
    var viewportheight; 

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

    if (typeof window.innerWidth != 'undefined') 
    { 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
    } 

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

    else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 
     'undefined' && document.documentElement.clientWidth != 0) 
    { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } 

    // older versions of IE 

    else 
    { 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
    } 

    $(document).ready(function() { 

     $("body").css({ 
      width : "+viewportwidth+", 
      height : "+viewportheight+" 
     }); 

    }); 

    //--> 

</script> 

混合任何一個可以幫我這個難題？

如果有辦法將其添加到通過PHP標籤體的HTML，這將是很酷，請參見下面我舉的例子...

<div style="width: <?php veiwportwidth(); ?>px; height: <?php veiwportheight(); ?>px;"> </div> 

如果是有道理的，不用擔心如果沒有，只是javascript位將非常有幫助。

在此先感謝。

Answer 1

你接近你的jQuery：

$('body').css({ 
    'width' : viewportwidth + 'px', 
    'height' : viewportheight + 'px' 
}); 

您還可以添加一個樣式節DOM，這對類重用有幫助（但在這種情況下並不多）：

演示：http://jsfiddle.net/ThinkingStiff/Pa9k3/

腳本：

var bodyStyle = 
    'body' 
    + '{' 
    + 'width: ' + viewportwidth + 'px;' 
    + 'height: ' + viewportheight + 'px;' 
    + '}'; 

$('<style />').append( 
    document.createTextNode(bodyStyle) 
).appendTo('head'); 

Answer 2

以下是你需要什麼來解決：

$("body").css({ 
    width : "+viewportwidth+", 
    height : "+viewportheight+" 
}); 

要：

$("body").css({ 
    "width" : viewportwidth + "px", 
    "height" : viewportheight + "px" 
});