Javascript получить размер окна просмотра браузера вывод в CSS тела - PullRequest
Новая
       22

Javascript получить размер окна просмотра браузера вывод в CSS тела

1 голос
/ 04 ноября 2011

Я использую javascript Энди Лэнгтона, чтобы получить размер моего порта. Смотрите ссылку ниже, если вы еще не слышали об этом.

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

Сценарий работает, но я не уверен, как наилучшим образом заставить скрипт выводить 'width' и 'height' в 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>

Может ли кто-нибудь помочь мне с этой загадкой?

Если есть способ добавить его в тело html через тег PHP, это тоже было бы здорово, см. Мой пример ниже ... 

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

Если это имеет смысл, не беспокойтесь, если нет, просто бит javascript был бы чрезвычайно полезен.

Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 04 ноября 2011

Вы были близки с вашим 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' );
1 голос
/ 04 ноября 2011

Вот что нужно исправить: 

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

Кому: 

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