[Notes] @media screen has no effect in browser development tools

   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" />

 

【參考連結】

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments