0

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

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

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"); 
    });
}

这工作得很好，但它只会在页面加载时以窗口大小获取元素的宽度 - 所以如果窗口只有 500 像素，那就是我坚持的容器大小。

我想做的事

用最简单的术语来说，我试图了解页面的外观，它的设计外观。无法知道网站的设计者是否使用边距、具体像素值或百分比来编码他们的网站，所以最简单的方法是让窗口大到足以说“是的，这就是它的外观”。

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

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

4

2 回答 2

1

您可以将body的宽度（或<html>元素的宽度）设置为 1280，计算所有宽度，然后将其改回 auto。只要 JS 不间断地运行，浏览器就不会重绘任何东西。

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

于 2013-01-23T20:46:23.870 回答
0

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

$(window).on("resize", function(){
  for(var i = 0, n; n = theElements[i]; ++i){
    $(n).each(function(){
       $(this).css({"max-width" : $(this).width() + "px"};
   })
  }
})
于 2013-01-23T20:44:33.027 回答