使用窗口大小jquery动态调整元素大小答案

【问题标题】：Dynamically resize element with window size jquery使用窗口大小jquery动态调整元素大小
【发布时间】：2012-07-07 04:51:04
【问题描述】：

我查看了很多关于这个主题的问题，但似乎无法找出我的代码有什么问题。任何帮助将不胜感激！

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

如果窗口被调整大小，我正在尝试将#element 调整为与窗口相同的高度和宽度。

【问题讨论】：

看这个小提琴：jsfiddle.net/aBHRp/1
帮帮我，stackoverflow.com/questions/33360273/…

标签： jquery resize

【解决方案1】：

关于.innerWidth()，来自docs：

此方法不适用于窗口和文档对象；为了这些，使用 .width() 代替。

note 也有相同的 note。

所以你需要使用.width()和.height()：

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

【讨论】：

感谢您的回复。这很有趣，因为如果我 alert(newwidth) 我确实得到了正确的宽度。
@Tyrsius 可能存在跨浏览器兼容性问题。
@Engineer 这是可能的。我正在使用 Chrome。
@MinaGabriel 如果inner(Width|Height) 在 Chrome 上工作，并不意味着它可以在所有浏览器上工作。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

你总是可以只使用 CSS：

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

【讨论】：

投反对票？除了没有 jQuery 之外，这与 Op 在其代码中所做的相同。

【解决方案4】：

在纯 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';

【讨论】：

【解决方案5】：

jsFiddle

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

两者都适合我

update

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

【讨论】：