Question

我有一个网站，我想跟随浏览器窗口的大小调整，以便始终适合。我尝试使用css transform scale属性，当前窗口宽度除以全屏窗口宽度给出的比率。它确实重新缩放，但它必定存在问题，因为它会在内容的左侧和右侧留下白色块（因此它会过度缩小网站，然后在窗口中居中）这是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组件有多小）您可以通过在头部添加以下元标记来实现这一点

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

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

希望它能提供帮助。

Answer 2

你可以使用它，把整个内容放在里面

#wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}

Answer 3

您要做的是使用自适应和自适应方法构建网站。看看这个链接是否有帮助！ http://www.imediaconnection.com/content/33435.asp#singleview

Answer 4

使用

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

在Html主题部分和

@media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
    #id{style}
}

CSS中的

。

调整网页大小以适应屏幕

4 个答案: