【笔记】@media screen 在浏览器开发工具没有效果

  刚刚在调 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" />

 

【參考連結】

本网站使用的Akismet,以减少垃圾邮件. 了解您的意见如何处理数据.

0 评论
内联反馈
查看所有评论