页面在移动浏览器中放大而不是全视口宽度答案

【问题标题】：Page zoomed in and not at full viewport width in mobile browsers页面在移动浏览器中放大而不是全视口宽度
【发布时间】：2018-02-14 02:35:37
【问题描述】：

我在使用响应式设计时遇到了问题。由于它是移动优化的，我包含了一个视口元标记，它应该确保页面在没有任何缩放的情况下加载并占据整个视口。但是，会发生以下情况：

(Screenshot) When loaded

(Screenshot) When zooming out

作为参考，下方的工具栏菜单是 position:fixed 的，因此不包含在正常的页面流中，导致它是“正常”宽度。这发生在 Chrome 和 Firefox 移动设备中，所以我认为它不依赖于浏览器。 Chrome 远程设备调试会话显示标题与

和元素一样宽，因此问题出在页面本身而不是标题本身。

这是我的代码（为简单起见，删除了菜单）：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
    <div id="header">
      <h1>TremeClothing</h1>
      <form id="search" action="page.php?stuff=things">
        <input type="text" name="search" autocomplete="off" spellcheck="false" />
      </form>
    </div>
  </body>
</html>

还有：

body {
  margin: 0;
  padding: 0;
  background-color: rgb(240, 240, 240);
  font-size: 20pt;
}

#header {
  width: 100%;
  padding: 0.5rem 1rem 1rem 1rem;
  background-color: rgb(0, 51, 51);
  position: relative;
  box-sizing: border-box;
  text-align: center;
}

#header h1 {
  display: inline;
  margin: 0;
  padding: 0;
  color: rgb(102, 153, 153);
  font-size: 3rem;
}

#search {
  display: inline-block;
  height: 3rem;
  width: 16rem;
  margin: 1rem 3rem 0 3rem;
}

#search input {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 3rem;
  box-sizing: border-box;
  background: rgb(102, 153, 153) no-repeat 0.5rem 0.5rem/2rem url(img/icons/search.svg);
  color: rgb(0, 51, 51);
  font-size: 1.5rem;
  font-weight: bold;
  border: none;
  border-radius: 2rem;
}

#search input:focus {
  outline: none;
}

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

您的页面缩放正确。

搜索栏开始滑出页面的原因是因为您的#search 具有固定宽度16rem，加上两侧的固定边距3rem，会稍微宽一些比你的手机屏幕。尝试将其用于您的 #search 样式：

display: inline-block;
height: 3rem;
width: 80%;
max-width: 16rem;
margin: 1rem 10% 0 10%;

这将确保您的#search 的宽度是流畅的，并且永远不会超过屏幕宽度的 100%。

【讨论】：