非响应式网站 - 视口问题 - 手机上页面显示缩放

Question

我使用html和css制作了一个页头、页面内容和页脚宽度为1170px的页面（就像boostrap一样），加起来为width+border+padding。

同时，我还使用了meta viewport标签。对于这个问题，我将其保留在下面。期望内容（页头、内容和页脚）可以适应移动设备上的viewport（img 1），但在某些设备上只显示部分内容，并给出了一个水平滚动条（img 2）。

我已经搜索了很多关于viewport的资料，但无法找到如何让所有设备都看起来像图片1的解决方案。请给予建议。

您可以查看ViewPort Test中的实时代码。我不会更改它。测试我将使用以下开发工具 VIEWPORT

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

CSS

  *{
    margin:0;
    padding:0;
    border:0;
  }
  div.header,
  div.content,
  div.footer{
    width:100%;
  }
  div.header{
    background:blue;
  }
  div.content{
    background:orange;
  }
  div.footer{
    background:purple;
  }
  div.wrapper{
    width:1120px;
    border:10px solid green;
    padding:0 15px 0 15px;
    margin:0 auto;
    background:red;
  }

HTML

<div class="header">
  <div class="wrapper">
      <h1>Header</div>
  </div>
</div>
<div class="content">
  <div class="wrapper">
      <h1>Content</h1>
  </div>
</div>   
<div class="footer">
  <div class="wrapper">
      <h1>Footer</h1>
  </div>
</div>  

- Vinicius Santana

---

你可以考虑使用max-width而不是width来获得更大的灵活性：max-width:1120px。工作示例。 - showdev

也许你可以使用'em'单位来工作。 - DaniP

我简化了代码，以便您们更容易地看到问题，并考虑到您提供的代码是正确的。问题在于，我将在这些包装器内放置内容，该内容应占据所有水平空间（1140像素）。请记住，我并不打算使其响应式。我只想让网站看起来像桌面版一样，但适合屏幕。 - Vinicius Santana

我更新了开发代码，使其更容易。我想要Header Left和Header Right并排而不是重叠在一起。http://daterrawebdev.com/viewport/viewport.php - Vinicius Santana

Answer 1

如果你没有使用媒体查询，只想让1170像素宽的固定布局填满移动屏幕，则需要更改如下内容：

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

转换为：

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

- ralph.m

Answer 2

很棒的东西，但是我发现如果您在台式电脑上，并且视口设置为静态宽度，则当您水平滚动时，屏幕未显示的部分可能不会渲染背景。为了解决这个问题，请在非响应式页面中将一个最小宽度添加到主体中。

body {
    min-width: 1170px;
}

注意，这是在设置视口静态宽度的基础上进行的补充。

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

- jeremykenedy

Answer 3

考虑到这是一个非响应式网站，所有的元标记视口只需要网站宽度即可，在我的情况下是1170像素。现在元标记视口看起来像这样：

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

- Vinicius Santana