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

【问题标题】：Non-responsive website - Viewport issue - Page showing zoomed in on mobile无响应的网站 - 视口问题 - 在移动设备上显示放大的页面
【发布时间】：2014-09-03 20:56:45
【问题描述】：

我使用 html 和 css 将页眉、页面内容和页脚组合在一起，宽度为 1170 像素（就像 boostrap 一样）加上宽度+边框+填充。

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

我希望内容（页眉、内容、页脚）适合移动设备上的视口（img 1），但我注意到在某些设备上它实际上只显示部分内容并给我一个水平滚动条（图 2）。

我一直在搜索有关视口的大量信息，但找不到有关如何使其在所有设备上看起来都像 img 1 的解决方案。请指教。

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

视野

 <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>

【问题讨论】：

您可以考虑使用max-width 而不是width 以获得更大的灵活性：max-width:1120px。 WORKING EXAMPLE
也许您可以使用“em”单位。
我简化了代码，让你们更容易看到问题，并考虑到代码提供你是对的@showdev。问题是我将在这些包装器中包含内容，并且内容应该占据所有水平空间（1140px）。请记住，我无意对此做出响应。我想要的只是让网站看起来像在桌面上一样，但适合屏幕。
我更新了开发代码以使其更容易。我希望 Header Left 和 Header Right 并排，而不是彼此重叠。 daterrawebdev.com/viewport/viewport.php

标签： html css mobile viewport

【解决方案1】：

如果您不使用媒体查询，并且只希望 1170 像素宽的固定布局填满移动屏幕，请更改此设置：

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

到这里：

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

【讨论】：

【解决方案2】：

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

要为无响应页面解决此问题，只需在正文中添加一个 min-width。

body {
    min-width: 1170px;
}

注意，这是除了将视口设置为静态宽度之外

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

【讨论】：

【解决方案3】：

考虑到这是一个无响应的网站，所有元标记视口都需要它的网站宽度，在我的例子中是 1170 像素。元标记视口现在看起来像这样：

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

【讨论】：