jquery - ウィンドウサイズのjqueryで要素のサイズを動的に変更する

Question

この件に関する多くの質問を見てきましたが、コードの何が問題なのかわかりません。どんな助けでも大歓迎です！

$(window).resize(function(){
   var newwidth = $(window).innerWidth();
   var newheight = $(window).innerHeight();      
   $("#element").height(newheight).width(newwidth);
       });

ウィンドウのサイズが変更された場合、 #element をウィンドウと同じ高さと幅にサイズ変更しようとしています。

Answer 1

について.innerWidth()、ドキュメントから:

このメソッドは、window および document オブジェクトには適用できません。これらには、代わりに .width() を使用してください。

にも同様の注意書き.innerHeight()があります。

したがって、次を使用する必要があり.width()ます.height()。

$(window).resize(function(){
    var newwidth = $(window).width();
    var newheight = $(window).height();      
    $("#element").height(newheight).width(newwidth);
});

Answer 2

jsフィドル

 $(window).resize(function(){
var newwidth = $(window).width();
var newheight = $(window).height();      
$("#element").height(newheight).width(newwidth);
  });​

どちらも私のために働く

アップデート

 $(window).resize(function(){
var newwidth = $(window).innerWidth();
var newheight = $(window).innerHeight();      
$("#element").height(newheight).width(newwidth);
  });​

Answer 3

プレーンなJavascriptでは、これを行うことができます：

    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
    }
    var mydiv = document.getElementById("element");
    mydiv.style.height=viewportheight'px';
    mydiv.style.width=viewportwidth+'px';

Answer 4

これを試して：

$(window).resize(function(){
   var newwidth = $(window).width();
   var newheight = $(window).height();      
   $("#element").css({"height": newheight, "width": newwidth });
});

Answer 5

いつでも CSS を使用できます。

#element {width:100%; height:100%; position:fixed; }