调整网页大小以适合屏幕

Resize web page to fit screen

本文关键字：屏幕 网页 调整      更新时间：2023-09-26

>我有一个网站，我想跟踪浏览器窗口的大小调整，以便它始终适合。我尝试使用 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)+')');
   });

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

为了使您的网站适合移动设备，您应该真正考虑使用媒体查询或使用一些前端框架（如Bootstrap，Foundation等）使其响应迅速。

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

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

它将强制浏览器保持网站缩放到足以适应移动屏幕宽度。

希望它会有所帮助。

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

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

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

使用

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

相关文章：