为什么@media min/max 控制字体大小的宽度在手动调整屏幕大小时有效，但在移动模式下无效？

Question

我有一个简单的 HTML 布局，我想根据 CSS 媒体查询设置字体大小。对于小于 767 的屏幕尺寸，我希望字体大小为 24px，对于大于或等于 768 的屏幕尺寸，我希望字体大小为 28px。但是，当我在 Chrome（版本 75.0.3770.142（官方构建）（64 位））中进入移动模式时，字体大小仍然保持在 28px。有趣的是，如果我处于桌面模式并且我只是将浏览器的右侧 window 向左拖动（手动减小 window 宽度），当屏幕显示时，字体大小确实会更改为 24 px小于 768px.

我不知道我的问题是因为不正确的查询，还是一些我不知道的 Chrome 怪癖。

这是我的 CSS:

html {
    box-sizing: border-box;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}

.container {
    margin-top: 1.6%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

hr {
    margin-top: 1.6%;
    width: 100%;
    border: solid 1px #eeeeee;
}

.under-maintenance {
    margin-top: 2.3%;
    font-family: Helvetica;
    color: #333333;
    text-align: center;
    font-weight: bold;
}

.back-soon {
    margin-top: 1.4%;
    margin-bottom: 52px;
    font-family: Helvetica;
    font-size: 24px;
    font-weight: 300;
    color: #333333;
}

@media (max-width: 767px) {
    .under-maintenance {
        font-size: 24px;
    }
}

@media (min-width: 768px) {
    .under-maintenance {
        font-size: 28px;
    }
}

这是我的 html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./error-page-500.css">
</head>
<body>

<div class="container">
    <img src="./images/logo.svg" alt="logo">
    <hr/>
    <span class="under-maintenance">UNDER MAINTENANCE</span>
    <span class="back-soon">We will be back soon</span>
    <img src="./images/man.png" alt="man">
</div>

</body>
</html>

Answer 1

您需要在 <head> 标签内的 html 中添加以下 meta 标签：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

这是更新后的 fiddle：

html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

.container {
  margin-top: 1.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

hr {
  margin-top: 1.6%;
  width: 100%;
  border: solid 1px #eeeeee;
}

.under-maintenance {
  margin-top: 2.3%;
  font-family: Helvetica;
  color: #333333;
  text-align: center;
  font-weight: bold;
}

.back-soon {
  margin-top: 1.4%;
  margin-bottom: 52px;
  font-family: Helvetica;
  font-size: 24px;
  font-weight: 300;
  color: #333333;
}

@media (max-width: 767px) {
  .under-maintenance {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .under-maintenance {
    font-size: 28px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="./error-page-500.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>

  <div class="container">
    <img src="./images/logo.svg" alt="logo">
    <hr/>
    <span class="under-maintenance">UNDER MAINTENANCE</span>
    <span class="back-soon">We will be back soon</span>
    <img src="./images/man.png" alt="man">
  </div>

</body>

</html>

为什么@media min/max 控制字体大小的宽度在手动调整屏幕大小时有效，但在移动模式下无效？

Why @media min/max width to control font-size works when manually resizing the screen but not in mobile mode?

html

css

media-queries

google-chrome-devtools