html 标签在窄视口上停止全宽答案

【问题标题】：html tag stops being full width on skinny viewportshtml 标签在窄视口上停止全宽
【发布时间】：2020-12-07 11:58:13
【问题描述】：

我的<html> 标记不再占据窄视口的整个宽度（即使应用的绿色背景色似乎跨越了整个宽度）。这会导致我的具有 1 行和 1 列的 css 网格水平变得不居中。在这个屏幕截图中，我将鼠标悬停在 <html> 标签上，而视口很窄：

一旦设备变宽，<html> 就会占据整个宽度并且内容水平居中。

html,
body {
  background-color: #46d689;
  align-content: space-evenly;
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
}

.subtitle {
  text-align: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: repeat(1, minmax(240px, 1fr));
  grid-template-rows: 1fr;
}

<section className="container">
        <img
          alt="logo"
          style={{
            height: "250px",
            objectFit: "contain",
          }}
          src={require("./img/logo_web.png")}
        />
        <h4 style={{ color: "#FFF" }}>The Vegan Repository</h4>
        <h4
          style={{
            color: "#FFF",
            fontWeight: "400",
            marginBottom: "0",
          }}
        >
          Find Vegan Products in your Local Community
        </h4>

        <span
          style={{
            color: "#FFF",
            marginBottom: "20px",
            display: "inline-block",
          }}
        >
          Coming Soon to iOS
        </span>
        <br />
        <div>
          {/* <a href="https://itunes.apple.com/nz/app/surfboard-volcalc/id1223913734?mt=8"> */}
          <i className={"fa fa-apple fa-5x"} style={{ color: "#FFF" }}></i>
          {/* </a> */}
        </div>

        <p style={{ color: "#FFF !important" }}>
          If you have any issues, questions or suggestions, contact me directly
          at{" "}
          <span>
            <a href="mailto:bt.farquhar@gmail.com">bt.farquhar@gmail.com</a>
          </span>
        </p>
      </section>

为什么<html> 标签在窄视口上不再占据全宽，导致我的内容变得不居中？

【问题讨论】：

请打个代码sn-p。

标签： html css css-grid

【解决方案1】：

只需使用：

html,body{
  height: 100vh !important;
  width: 100vw !important;
}

应该这样做。

【讨论】：