0

我有一个网站，我想跟随浏览器窗口的大小调整以使其始终适合。我尝试使用 css 转换比例属性，其比率由当前窗口宽度除以全屏窗口宽度给出。它确实会重新缩放，但它肯定有问题，因为它在内容的左侧和右侧留下了白色块（因此它会过度缩小网站，然后在窗口中居中）这是 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)+')');
   });

有没有更好的方法使页面适合窗口（或正确缩放）？

4

4 回答 4

2

为了使您的网站对移动设备友好，您应该真正考虑使用媒体查询或使用一些前端框架（如 Bootstrap、Foundation 等）使其具有响应性。

或者，如果您只是想缩放您的网站，使其不应该水平缩放并适合用户的屏幕（无论您的 UI 组件变得多么小），您可以通过在头部添加以下元标记来做到这一点。

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

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

希望它会有所帮助。

于 2016-12-17T11:05:34.853 回答
0

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

于 2013-10-25T20:38:39.767 回答
0

您可以使用它，将整个内容放入其中

#wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}
于 2013-10-25T20:30:40.560 回答
0

利用

<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 中。

于 2016-12-17T11:43:04.953 回答