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
![](https://it-help.tips/wp/wp-content/uploads/2021/01/20210120a1.png)
Turn off touch simulation
![](https://it-help.tips/wp/wp-content/uploads/2021/01/20210120a2.png)
Edge (Chromium) Adjustment method
1. point"…」
2. Select "Add device type"
![](https://it-help.tips/wp/wp-content/uploads/2021/01/20210120a3.png)
1. Device type selection "Responsive"
2. In "device type" from “Mobile” Changed “Desktop” To。
![](https://it-help.tips/wp/wp-content/uploads/2021/01/20210120a4.png)
《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