【筆記】@media screen 在瀏覽器開發工具沒有效果

  剛剛在調 CSS 語法時,不知道為什麼,解析度模擬成手機解析度後,版型沒有呈現 RWD 該有的效果,一開始以為 @media screen 語法沒有生效,反覆測試後,發現卻是因為 width 語法沒有跟著解析度的比例變動 (已經設成 auto 或用 max-width)。後來試出是要關閉「網頁開發者」模式裡的”觸控模擬”功能,才會正常,目前還不知道為什麼會這樣影響。

Firefox
開啟觸控模擬功能

 

關閉觸控模擬功能

 

Edge (Chromium) 調整方式
1. 點「…」
2. 選擇「Add device type」

1. 設備型態選擇「Responsive」
2. 在「device type」從 “Mobile” 改成 “Desktop” 即可。

 

《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 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

0 Comments
Inline Feedbacks
View all comments