移动端网页文本无法占满屏幕问题求助（附代码）

按优先级排查以下常见问题，逐一验证即可解决：

1. 缺失viewport元标签 #

移动端媒体查询生效的核心前提是浏览器能正确识别设备宽度，必须在HTML的<head>中添加viewport标签：

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

缺少该标签时，浏览器会以桌面端宽度渲染页面，你的@media规则根本不会触发。

2. 媒体查询语法错误 #

检查你的@media规则是否存在语法疏漏：

• 漏掉括号：错误写法@media screen and max-width:768px，正确应为@media screen and (max-width:768px)
• 遗漏单位：比如写max-width:768而非max-width:768px
• 逻辑运算符错误：把and写成&这类符号

正确的媒体查询示例：

@media screen and (max-width: 768px) {
  /* 你的移动端样式 */
}

3. CSS优先级冲突 #

如果大屏的段落样式用了更具体的选择器，媒体查询里的样式会被覆盖。比如：

/* 大屏样式（权重更高） */
body .content-section .article-paragraph {
  column-count: 2;
}

/* 移动端样式（权重低，不生效） */
@media screen and (max-width:768px) {
  .article-paragraph {
    column-count: 2; /* 想保持多列但被覆盖 */
  }
}

解决方法：让媒体查询的选择器权重与大屏样式一致，或调整为更具体的选择器：

@media screen and (max-width:768px) {
  body .content-section .article-paragraph {
    column-count: 2;
  }
}

4. 选择器匹配错误 #

确认媒体查询里的选择器和大屏样式的选择器指向同一个目标元素。比如大屏给.text-block设置了多列，而媒体查询里写的是.paragraph，自然不会生效。

完整示例代码 #

如果你的需求是移动端实现自适应分栏而非强制单列，可以用column-width替代固定的column-count，让浏览器根据屏幕宽度自动调整列数：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .article-container {
      padding: 1rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 全局分栏规则，自动适配屏幕 */
    .article-container p {
      column-width: 220px; /* 最小列宽，浏览器自动分栏 */
      column-gap: 1.5rem;
      line-height: 1.6;
    }

    /* 极端小屏强制单列（可选） */
    @media screen and (max-width: 480px) {
      .article-container p {
        column-count: 1;
      }
    }
  </style>
</head>
<body>
  <div class="article-container">
    <p>你的段落内容文本，这里可以填充足够多的内容来测试分栏效果。你的段落内容文本，这里可以填充足够多的内容来测试分栏效果。你的段落内容文本，这里可以填充足够多的内容来测试分栏效果。你的段落内容文本，这里可以填充足够多的内容来测试分栏效果。</p>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Edward Wynman