Question

点击here查看我的示例。

我试图在我的简单网站中使用此代码来响应调整页面的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();
});

Answer 1

使用JS调整页面大小是一个糟糕的主意。

这就是原因：

如果您的用户已禁用JS，该怎么办？
如果您的用户使用的旧版浏览器无法足够快地呈现JS，该怎么办？
每次调整浏览器大小时，都必须重新呈现内容。
Javascript应该用于向网站添加功能，而不是创建它们。

其次，

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

创建自适应网页的一个很好的起点是本文：2014 Guide to Responsive Web Design。任何经验丰富的前端Web开发人员都会告诉您，响应良好的网站的关键是首先开发移动设备。这将确保您的网站能够扩展规模。很好。

第三，

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

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

1 个答案: