Question

我正在创建一个插件，以帮助使网站响应。第一步是创建一个故障保护，所以事情看起来仍然像他们应该的那样。

在页面加载时，我希望以最大窗口大小获取元素的宽度。目前，我只是这样做：

var theElements = ['div', 
                'section',
                'table',
                'article',
                'aside',
                'details',
                'figcaption',
                'figure',
                'footer',
                'header',
                'hgroup',
                'nav',
                'section',
                'summary'];


for (var i=0; i<theElements.length; i++){

    $(theElements[i]).each(function(){
        var theWidth = $(this).width();
        $(this).css('max-width', theWidth + "px"); 
    });
}

这很好地漂亮，但它只在页面加载时获得窗口大小的元素宽度 - 所以如果窗口只有500px，那就是我坚持使用的容器大小。

我想做什么

简单来说，我正试图弄清楚意味着的页面是什么样的，它是如何设计的。没有办法知道网站的设计师是否使用了边距，具体的像素值或百分比来编码他们的网站，所以最简单的方法就是让窗口大到足以说“是的，这就是它的外观”。

我希望能够非常快速地将窗口宽度设置为1280px，计算theElements宽度，然后将其设置回原来的任何值（这不是一个好的选择，因为它是突兀的用户）或以其他方式找到一些方法来计算元素的宽度，如果体宽是1280px（更好的用户体验，但不确定是否可能）。

实现这一目标的最佳方式是什么？

Answer 1

您可以将 body 的宽度（或者除此之外的<html>元素）设置为1280，计算所有宽度，然后将其更改回自动。只要JS没有中断运行，浏览器就不会重绘任何内容。

我能看到的唯一其他选项是将整个文档克隆到具有固定宽度的隐藏元素中，然后将其全部丢弃。不过，那要贵得多。

Answer 2

虽然我不完全理解为什么要将元素的最大宽度设置为元素的宽度，但这应该会使其响应屏幕大小的变化。

$(window).on("resize", function(){
  for(var i = 0, n; n = theElements[i]; ++i){
    $(n).each(function(){
       $(this).css({"max-width" : $(this).width() + "px"};
   })
  }
})

jQuery - 如果窗口宽度为'x'，则获取元素的宽度

2 个答案: