javascript - Resolusi yang berbeza apabila membuka halaman yang berbeza pada telefon mudah alih

Question

Saya seorang pemula, cuba membuat sendiri halaman web responsif tanpa menggunakan rangka kerja.
Namun, terdapat masalah yang sangat tidak masuk akal pada versi mudah alih!

Buka dua halaman web dengan dua resolusi!

Ia adalah: halaman utama, halaman pendaftaran.
Halaman pendaftaran mempunyai bahagian nav dan footer yang sama seperti halaman utama, jadi html halaman pendaftaran merujuk dahulu css halaman utama, dan kemudian css khas halaman pendaftaran.

Ujian ini termasuk simulasi telefon mudah alih yang disertakan dengan Chrome F12 dan HUAWEI G7.

Berikut ialah tangkapan skrin penyahpepijatan simulasi telefon Chrome:

Halaman utama

Halaman pendaftaran

Bahagian badan yang paling penting ialah lebar, dan yang lain juga boleh dilihat dalam gambar.

body {
    width:100%;
}

Anda boleh lihat di sudut kanan bawah bahawa resolusi keseluruhan halaman kedua adalah lebih besar. Ini juga berlaku pada telefon mudah alih.

Answer 1

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">