无响应的网站 - 视口问题 - 显示在移动设备上放大的页面

Question

我使用html和css将页面放在一起，页面内容和页脚的宽度为1170px（就像boostrap一样），将width + border + padding加在一起。

我也在使用元标记视口。对于这个问题，我将它留在下面。

我期待内容（标题，内容，页脚）适合移动设备上的视口（img 1）而且它确实适用于某些设备，但我注意到在某些设备中它实际上只显示了部分内容并给了我一个水平滚动条（img 2）。

我一直在搜索关于视口的很多东西但是找不到关于如何让它在所有设备上看起来像img 1的解决方案。请指教。

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

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>  

Answer 1

如果您不使用媒体查询，而您只想要1170px宽的固定布局来填充移动屏幕，请更改此信息：

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

到此：

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

Answer 2

Great Stuff，但是，我发现如果您在桌面上并且视口设置为静态宽度，则在水平滚动时，背景可能无法在屏幕上未显示的部分呈现。

要为非响应页面修复此问题，只需在主体上添加最小宽度。

body {
    min-width: 1170px;
}

注意，这是将视口设置为静态宽度

的补充

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

Answer 3

考虑到这是一个无响应的网站，所有metatag视口都需要网站宽度，在我的情况下，1170px。 metatag视口现在看起来像这样：

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