如何使用 javascript 或 jquery 设置带有响应内容的 html body 最大宽度 650px答案

【问题标题】：How to set html body max width 650px with responsive content with javascript or jquery如何使用 javascript 或 jquery 设置带有响应内容的 html body 最大宽度 650px
【发布时间】：2021-12-03 00:49:53
【问题描述】：

您好，我正在开发一个网站，该网站基本上适用于 台式机、iPad 和手机等所有人，而且该网站完全响应式，我使用了引导程序和其他一些@media 规则，所以目前当我调整窗口大小时会自动调整这个网站，所以现在我的期望是这样。

期待：

我有一个 html body 并且我想将 body max-width 设置为 650px 响应式内容，所以我可以如何使用一些 javascript 和 jquery 来实现这一点，如果你发布答案，那么它会有利于我理解代码。

我的代码

HTML

<body class="customcss">
  <app-root></app-root>
</body>

CSS

.customcss{
  max-width: '650px'; // this is set 650px to body page
  margin: 0 auto; // body content display on center of the screen
}

你可以检查这个以用于演示目的，我想用this做同样的事情

注意

我已经使用iframe 完成了此操作，但iframe 将无法正常工作，因为有些事情将无法正常工作，例如路由 url 不会显示在 url 栏中

【问题讨论】：

你的意思是body { max-width: 650px; }？为什么要使用 JavaScript 或 jQuery？
我想在调整窗口大小时以 650 像素的内容显示响应式网站，然后它工作正常，但我的正文页面宽度为 650 像素，所以响应式无法正常工作，我问我如何用任何方法实现这一点jquery代码或javascript代码

标签： javascript html jquery angular responsive-design

【解决方案1】：

body { max-width: 650px; }

或者用rem代替px，让它更“响应”，不用JS

【讨论】：

发错帖子了

【解决方案2】：

document.body.style.maxWidth = "650px"

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。
发错帖子了

【解决方案3】：

无法在600px 中使用 JavaScript 和 jQuery 显示响应式页面内容。

一件事你可以实现iframeiframe。它会显示响应式内容，但您说iframe 对此不起作用，它会带来一些其他问题，例如路由和搜索引擎优化。

所以您需要手动更改所有 Bootstrap 类，没有其他方法。如果您使用的是 Bootstrap，请根据您的要求将类更改为 col-12。

您也可以使用@media rule 来提高响应速度。

【讨论】：