javascript - 调整网页大小以适合屏幕

Question

我有一个网站，我想跟随浏览器窗口的大小调整，以使其始终适合。我尝试使用 css transform scale 属性，其比例为当前窗口宽度除以全屏窗口宽度。它确实重新缩放，但一定有问题，因为它在内容的左侧和右侧留下了白色 block (因此它缩小了网站太多，然后在窗口中居中)这是javascript代码:

$(window).resize(function(){
           var ratio = $(window).width()/1340;
                $('body').css('transform','scale('+(ratio)+')');
                $('body').css('-ms-transform','scale('+(ratio)+')');
                $('body').css('-moz-transform','scale('+(ratio)+')');
                $('body').css('-webkit-transform','scale('+(ratio)+')');
   });

是否有更好的方法使页面适合窗口(或使缩放比例适当)？

Answer 1

为了使您的网站适合移动设备，您应该真正考虑使用媒体查询或使用一些前端框架(如 Bootstrap、Foundation 等)使其具有响应能力。

或者，如果您只想缩放您的网站，使其不应该水平缩放并适合用户的屏幕(无论您的 UI 组件变得多小)，您可以通过在 head 部分添加以下元标记来实现。

<meta name="viewport" content="width=device-width, initial-scale=1">

它会强制浏览器保持网站的大小足以适应移动屏幕的宽度。

希望对你有帮助。