Javascript获取浏览器视口大小并输出到主体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"
});