[Notes] L'écran @media n'a aucun effet sur les outils de développement de navigateur

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]

Laisser un commentaire

S'il vous plaît noter: La modération des commentaires est activée et peut retarder votre commentaire. Il n'est pas nécessaire de renvoyer votre commentaire.