视口宽度小于980px时移动端页面缩小的问题解决咨询

核心问题概述 #

在视口宽度小于980px的设备上查看网页时，所有内容显示过小，且页面宽度固定为980px，导致CSS中检测宽度小于980px的@media媒体查询无法触发，如何解决该问题？

复现步骤 #

• 该问题可在任意页面复现，即使是仅包含一行文本的简单页面。
• 使用浏览器内置功能模拟设备：Chrome的「Device Toolbar」和Firefox的「Responsive Design Mode」，均可在开发者工具菜单中找到。
• 在Firefox中，需先启用「touch simulation」才能复现问题。
• 实际测试表现：当视口宽度大于980px时显示正常，但缩小至980px以下时，所有内容会变得异常小（左侧为正常缩放效果，右侧为异常缩小效果）。

问题原因 #

这是由于网页未设置视口元标签（viewport meta tag），移动端浏览器会默认将页面按照980px的桌面宽度渲染，再整体缩小适配手机屏幕。此时页面的实际渲染宽度仍为980px，导致检测视口宽度的@media媒体查询无法触发，同时内容被强制缩小显示。

解决方法 #

在HTML文档的<head>标签内添加以下视口元标签：

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

该标签的核心作用：

• width=device-width：让页面宽度匹配设备的实际屏幕宽度
• initial-scale=1.0：设置页面初始缩放比例为1，避免浏览器自动缩小页面内容

添加后，浏览器会正确识别设备的实际视口宽度，@media媒体查询能按预期触发，页面内容也会以正常比例显示在小屏设备上。

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