我有一个网站,我想跟随浏览器窗口的大小调整,以使其始终适合。 我尝试使用 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)+')');
});
是否有更好的方法使页面适合窗口(或使缩放比例适当)?
最佳答案
为了使您的网站适合移动设备,您应该真正考虑使用媒体查询或使用一些前端框架(如 Bootstrap、Foundation 等)使其具有响应能力。
或者,如果您只想缩放您的网站,使其不应该水平缩放并适合用户的屏幕(无论您的 UI 组件变得多小),您可以通过在 head 部分添加以下元标记来实现。
<meta name="viewport" content="width=device-width, initial-scale=1">
它会强制浏览器保持网站的大小足以适应移动屏幕的宽度。
希望对你有帮助。
关于javascript - 调整网页大小以适合屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19598836/