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?


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 .


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


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

-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">
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.