刚刚在调 CSS 语法时,不知道为什么,解析度模拟成手机解析度后,版型没有呈现 RWD 该有的效果,一开始以为 @media screen 语法没有生效,反覆测试后,发现却是因为 width 语法没有跟着解析度的比例变动 (已经设成 auto 或用 max-width)。后来试出是要关闭「网页开发者」模式里的”触控模拟”功能,才会正常,目前还不知道为什么会这样影响。
火狐
开启触控模拟功能
关闭触控模拟功能
边缘 (铬) 调整方式
1. 点「…“
2. 选择「Add device type」
1. 设备型态选择「Responsive」
2. 在「device type」从 “移动” 改成 “桌面” 即可。
《2024/02/23 更新》
後來找出原因,網站在 HTML Head 有定義 viewport 的 meta tag,如下:
<meta name="viewport" content="width=device-width" />
但沒有定義 initial-scale 比例,因此補上就可以了。
<meta name="viewport" content="width=device-width, initial-scale=1" />
【參考連結】
- 在谷歌浏览器中, 禁用触摸传感器仿真的能力在哪里? – Quora
- Responsive Web Design 基礎 : 设置 | by Amdis Liu | Frochu | Medium