Gerade als ich die CSS-Syntax angepasst habe,Ich weiß nicht, warum,Nachdem die Auflösung als Handyauflösung simuliert wurde,Die Version zeigt nicht den Effekt, den RWD haben sollte,Zuerst dachte ich, dass die @ media-Bildschirmsyntax nicht wirksam wird,Nach wiederholten Tests,Es wurde festgestellt, dass die Breitengrammatik nicht der Änderung des Auflösungsverhältnisses folgte (Bereits auf Auto eingestellt oder maximale Breite verwenden)。Später habe ich versucht, den "Web Developer" -Modus zu schließen”Berühren Sie die Simulation”Eigenschaften,Wird normal sein,Ich weiß nicht, warum dies so ist。
Firefox
Aktivieren Sie die Touch-Simulation
Schalten Sie die Berührungssimulation aus
Kante (Chrom) Einstellmethode
1. Punkt"…"
2. Wählen Sie "Gerätetyp hinzufügen"
1. Gerätetypauswahl "Responsive"
2. In "Gerätetyp" von “Handy, Mobiltelefon” 改成 “Desktop” zu。
《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" />
Referenz [link]
- In Google Chrome, Wo ist die Möglichkeit, die Emulation von Berührungssensoren zu deaktivieren?? – Quora
- Responsive Web Design 基礎 : Einstellung | by Amdis Liu | Frochu | Medium