Juste au moment où j'ai ajusté la syntaxe CSS,Je ne sais pas pourquoi,Une fois la résolution simulée comme la résolution du téléphone mobile,La version ne montre pas l'effet que RWD devrait avoir,Au début, je pensais que la syntaxe de l'écran @media ne prenait pas effet,Après des tests répétés,Il a été constaté que la grammaire de largeur ne suivait pas le changement de rapport de résolution (Déjà défini sur auto ou utilise max-width)。Plus tard, j'ai essayé de fermer le mode "Développeur Web"”Simulation tactile”Caractéristiques,Sera normal,Je ne sais pas pourquoi cela affecte de cette façon。
Firefox
Activer la simulation tactile
Désactiver la simulation tactile
Bord (Chrome) Méthode d'ajustement
1. point"…"
2. Sélectionnez "Ajouter un type d'appareil"
1. Sélection du type d'appareil "Responsive"
2. Dans "type d'appareil" de “Mobile” 改成 “Bureau” à。
《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" />
Référence [lien]
- Dans Google Chrome, où est la possibilité de désactiver l'émulation du capteur tactile? – Quora
- Responsive Web Design 基礎 : Mise | by Amdis Liu | Frochu | Medium