剛剛在調 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" />
【參考連結】
- In Google Chrome, where is the ability to disable touch sensor emulation? – Quora
- Responsive Web Design 基礎 : 設定 | by Amdis Liu | Frochu | Medium
Leave a Reply