Javascript 内容在重新调整大小后适合屏幕

在1024的宽度下，我希望页面主体适合没有滚动条的用户的屏幕。基本上，我想缩放整个身体，使其适合1024宽度以下的屏幕浏览器（无滚动条）。 我试过这样的方法：

function resizeWindow() {
   $(window).off('scroll');

   windowWidth = $(window).width();
   console.log(windowWidth);
     if (windowWidth > 1024) 
     {
         console.log(">1024");
     }else if (windowWidth <= 1024) 
     {
       $('body').css('height', '100vh');
       $('body').css('width', '100vw')
     }
}

$(window).resize(resizeWindow);

---

使用

@media

查询

@media screen and (max-width: 1024px) {
  body, html {
    height: 100vh;
    width: 100vw;
  }
}

---

设置viewport meta通常就足够了，检查可能的重复，并且您“不能”真正更改

正文、html

的宽度。在

正文

中添加包装器元素。

@media screen and (max-width: 1024px) {
  body, html {
    height: 100vh;
    width: 100vw;
  }
}