如何使用 javascript 或 jquery 设置响应式内容的 html 主体最大宽度 650px

Question

你好，我正在一个网站上工作，该网站基本上适用于 desktop、iPad 和 phone 并且该网站 完全响应 并且我使用了 bootstrap 和其他一些 @media 规则，所以目前当我调整大小时window 然后自动调整这个网站，所以现在我的期望是。

期望：

我有一个 html body，我想将 body max-width 设置为 650px 具有响应式内容，所以我如何实现这一点一些 javascript 和 jquery 如果你 post 回答那么我理解代码将有好处。

我的代码

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

NOTE

我已经用 iframe 做了这个，但是 iframe 不会工作，因为有些东西不会工作，比如路由 url 不会在 url 栏中显示

Answer 1

body { max-width: 650px; }

或者使用 rem 代替 px 使其更“响应”而不需要使用 JS

Answer 2

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

Answer 3

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

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

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

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

How to set html body max width 650px with responsive content with javascript or jquery