Desain web responsif berfungsi di desktop tetapi tidak di perangkat seluler

117

Saya memiliki situs web yang harus responsif terhadap ponsel. Saya telah membuatnya menggunakan desktop saya. Ketika saya menyesuaikan jendela browser, ini berfungsi dengan sempurna untuk ponsel tetapi ketika saya memeriksanya di ponsel asli saya: Samsung Galaxy S2 itu tidak responsif terhadap tampilan seluler.

Apa yang salah?

mobile web responsive-design Tadas Davidsonas
sumber
1
Anda harus menambahkan lebih banyak info dan kode agar siapa pun dapat membantu. CSS, HTML, dll. Kerangka apa (seperti Twitter Bootstrap) yang Anda gunakan, jika ada, dll.
ajacian81

Jawaban:

308

Anda mungkin kehilangan tag meta viewport di kepala html:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Tanpa itu perangkat mengasumsikan dan menyetel viewport ke ukuran penuh.

Info selengkapnya di sini .

Agush
sumber
2
Ini dapat bekerja di browser tanpa baris ini tetapi di seluler itu hanya membutuhkan baris ini.
Tadas Davidsonas
3
Aku hanya mencintaimu
Dimitris Filippou
Aku juga mencintaimu @ ΔημήτρηςΦιλίππου
Agush
Kata-kata lain cinta untuk Anda
btlm
3
pastikan produksi index.htmlbenar-benar menyertakan tag serta pengembanganindex.html
halafi
6

Saya juga menghadapi masalah ini. Akhirnya saya mendapat solusi. Gunakan kode di bawah ini. Harapan: masalah akan terpecahkan.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Saiful Islam
sumber
2

Padahal sudah dijawab di atas dan itu benar untuk digunakan

<meta name="viewport" content="width=device-width, initial-scale=1">

tetapi jika Anda menggunakan React dan webpack maka jangan lupa untuk menutup tag elemen

<meta name="viewport" content="width=device-width, initial-scale=1" />
Shadab Ahmed
sumber
-1

Tag meta responsif

Untuk memastikan rendering yang tepat dan zoom sentuh untuk semua perangkat, tambahkan tag meta area pandang responsif ke Anda <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Marcelo Austria
sumber