刚才在调试 CSS 语法时，不知道为什么，将分辨率模拟成手机分辨率后，版型没有显示 RWD 应有的效果，一开始以为 @media screen 语法没有生效，反复测试后，发现却是因为 width 语法没有跟着分辨率的比例变化 (已经设成 auto 或用 max-width)。后来试出是要关闭‘网页开发者’模式里的”触控模拟”功能，才会正常，目前还不知道为什么会这样影响。
Firefox
開啟觸控模擬功能
關閉觸控模擬功能
Edge (Chromium) 调整方式
1. 点“…」
2. 选择“添加设备类型”
1. 设备类型选择“响应式”
2. 在“设备类型”从 “移动端” 改成 “桌面端” 即可。
《2024/02/23 更新》
后来找出原因，网站在 HTML 头部有定义 viewport 的 meta 标签，如下：
<meta name="viewport" content="width=device-width" />
但没有定义 initial-scale 比例，因此补上就可以了。
<meta name="viewport" content="width=device-width, initial-scale=1" />
【参考链接】
- 在 Google Chrome 中, 哪里可以禁用触摸传感器模拟? – Quora
- 响应式网页设计基础 : 设置 | 作者 Amdis Liu | Frochu | Medium
留下回复