Just when I adjusted the CSS syntax,I do not know why,After the resolution is simulated as the mobile phone resolution,The version does not show the effect that RWD should have,At first I thought the @media screen syntax did not take effect,After repeated testing,It was found that the width grammar did not follow the resolution ratio change (Already set to auto or use max-width)。Later, I tried to close the "Web Developer" mode”Touch simulation”Features,Will be normal,I don’t know why it affects this way。
Firefox
Turn on touch simulation
Turn off touch simulation
Edge (Chromium) Adjustment method
1. point"…」
2. Select "Add device type"
1. Device type selection "Responsive"
2. In "device type" from “Mobile” Changed “Desktop” To。
《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 基礎 : Setting | by Amdis Liu | Frochu | Medium