Html 无响应网站-视口问题-显示手机上放大的页面

我用html和css组合了一个页面，页眉、页面内容和页脚的宽度为1170px（就像boostrap一样），加上宽度+边框+填充

我也在使用元标记视口。对于这个问题，我将其作为附件保留

我原本希望内容（页眉、内容、页脚）能够在手机上的视口（img 1）中显示，但在某些设备上确实如此，但我注意到，在某些设备上，它实际上只显示部分内容，并给我一个水平滚动条（img 2）

我已经搜索了很多关于viewport的内容，但找不到一个解决方案，如何使它在所有设备上看起来像IMG1。请给我一些建议

您可以在查看实时代码。我不会改变这个。 对于测试，我将使用以下内容：

视区

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

HTML

标题
内容
页脚

如果您不使用媒体查询，而只希望1170px宽的固定布局填充移动屏幕，请更改此选项：

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

为此：

<meta name="viewport" content="width=1170">

---

考虑到这是一个无响应的网站，所有metatag viewport都需要它——网站宽度，在我的例子中是1170px。metatag视口现在如下所示：

<meta name=viewport content="width=1170">  

---

很棒的东西，但是，我发现如果您在桌面上，并且视口设置为静态宽度，则水平滚动时，屏幕上未显示的部分可能不会呈现背景

要解决非响应页面的问题，只需在正文中添加最小宽度

body {
    min-width: 1170px;
}

注意，这是对视口静态宽度的附加设置

<meta name=viewport content="width=1170">  

<>代码>您可以考虑使用而不是<代码>宽度>代码>以获得更大的灵活性：<代码>最大宽度：1120px。也许你可以使用“em”单元。我简化了代码，让你们更容易看到问题，并考虑到代码提供的您是正确的@showdev。问题是，我将在这些包装器中包含内容，而这些内容应该占据所有水平空间（1140px）。请记住，我不打算让这件事有回应性。我只想让网站看起来像在桌面上一样，但适合屏幕。我更新了开发代码，使之更容易。我想要左头球和右头球并排，而不是相互重叠。
body {
    min-width: 1170px;
}

<meta name=viewport content="width=1170">