如何使用JavaScript/JQuery相应地调整页面的HTML大小？

单击此处查看我的示例

我正在尝试在我的简单网站中使用此代码来响应地调整页面的HTML大小，即使在调整窗口大小时也是如此

这是不可能的，还是我只是犯了一个简单的错误？这个网站是为1360x768（我的分辨率）设计的，但是这个代码让它看起来非常不稳定，并且没有显示滚动条（不确定为什么）

要调整大小/缩放的代码：

function scalePage(){
    document.getElementsByTagName("*").each(function(){
        var width  = ($(this).width() ) / 1360;
        var height = ($(this).height()) / 768;
        $(this).css("transform", "scale("+width+","+height+")");
        $(this).css("-moz-transform", "scale("+width+","+height+")"); 
        $(this).css("-webkit-transform", "scale("+width+","+height+")");
        $(this).css("-o-transform", "scale("+width+","+height+")");
    });
}

$(document).ready(function() {
    scalePage();
});
$(window).resize(function() {
    scalePage();
});

---

从一开始，使用JS调整页面大小是个坏主意

原因如下：

• 如果您的用户禁用了JS怎么办
• 如果您的用户有一个旧浏览器，不能足够快地呈现JS，该怎么办
• 每次调整浏览器大小时，都必须重新呈现内容
• Javascript应该用于向站点添加功能，而不是创建功能

第二,

这种方法不是“响应性”的。为了在站点上实现响应性布局，您应该使用CSS来控制它，因为它比Javascipt/jQuery快得多

创建响应性网页的一个良好起点是本文：。任何经验丰富的前端web开发人员都会告诉您，一个响应良好的网站的关键是首先开发移动设备。这将确保您的站点能够很好地“扩展”

第三,

---

我将再次重申我关于javascript用于添加功能的观点，当我禁用javascript或在安装了IE8的旧笔记本电脑上浏览时，我会越来越多地看到网站失败。（尽管现在有人反对支持IE8。）

首先，简单地缩放当前布局/内容的表示是没有响应的。此外，如果您有充分的理由这样做，您应该将该逻辑存储在函数中，并从

ready

和

resize

处理程序中引用该函数。。。并存储对根元素的引用。。并将设置对象传递到一个调用

css（）

，@KevinBoucher感谢您的建议。我用更新的代码编辑了这篇文章。这一次，我不再只调整html的大小，而是调整所有内容的大小。这会被视为一个错误吗？