[Catatan] Layar @media tidak berpengaruh pada alat pengembangan browser

Tepat ketika saya menyesuaikan sintaks CSS,不知道為什麼,Setelah resolusi disimulasikan sebagai resolusi ponsel,Versi tersebut tidak menunjukkan efek yang seharusnya dimiliki RWD,Awalnya saya pikir sintaks layar @media tidak berpengaruh,Setelah pengujian berulang,Ditemukan bahwa tata bahasa lebar tidak mengikuti perubahan rasio resolusi (Sudah disetel ke otomatis atau gunakan lebar maksimal)。Kemudian, saya mencoba menutup mode "Pengembang Web"”Simulasi sentuh”fitur,Akan normal,Saya tidak tahu mengapa hal itu memengaruhi cara ini。

Firefox
Aktifkan simulasi sentuh

 

Matikan simulasi sentuh

 

Tepi (Chromium) Metode penyesuaian
1. titik"…"
2. Pilih "Tambahkan jenis perangkat"

1. Pemilihan jenis perangkat "Responsif"
2. Dalam "tipe perangkat" dari “Seluler” 改成 “Desktop” Adil。

 

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

 

[Tautan referensi]

Tinggalkan Komentar

Harap dicatat: Moderasi komentar diaktifkan dan dapat menunda komentar Anda. Tidak perlu mengirimkan kembali komentar Anda.