Situs web responsif diperbesar dengan lebar penuh di seluler

139

Saya menguji navbar respons bootstrap dan saya memiliki situs web demo . Ketika saya mengubah ukuran browser di desktop, semuanya berfungsi dengan baik termasuk nav bar yang menjadi menu yang dapat dilipat dengan ikon kecil di bagian atas yang dapat saya klik untuk melihat lebih banyak tombol menu.

Tetapi ketika saya mencobanya dari browser seluler (saya mencobanya di chrome dan browser internet di Android), saya tidak melihat desain yang responsif. Saya hanya bisa melihat versi desktop yang sangat kecil seperti situs web.

Adakah yang bisa menunjukkan kesalahan saya?

twitter-bootstrap user-interface twitter-bootstrap-3 responsive-design bootstrap-4 lawphotog
sumber

Jawaban:

378

Tambahkan ini ke kepala HTML Anda ..

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

Ini memberi tahu browser perangkat yang lebih kecil bagaimana mengatur skala halaman. Anda dapat membaca lebih lanjut tentang ini di sini: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Zim
sumber
1
saya telah menambahkan kode ini di bagian kepala tetapi tidak berfungsi untuk penjelajah internet default Android Anda, Anda dapat memeriksa - www.freerechargeapp.com/index.html
santosh
Saya benar-benar tidak mengerti mengapa bagi saya tidak bekerja. Dalam satu situs web berfungsi dan di situs web lain tidak. Dan struktur kodenya mirip dengan bootstrap baru
bheatcoker
1
@ Skelly - Jawaban lain yang saya lihat ditinggalkan maximum-scale, dan digunakan 1.0sebagai gantinya 1. Apakah Anda tahu jika hal-hal ini membuat perbedaan?
onebree
1
Anda menyelamatkan saya :) Terima kasih.
Fatih
1
Terima kasih dua tahun kemudian posting Anda masih shiznizzle (sic.) 😎
Walt
17

seperti yang disarankan di sini http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

akan menjadi pilihan yang lebih baik karena membuat dari potret ke lanskap dan kembali pengalaman pengguna yang jauh lebih menyenangkan karena dengan / tinggi akan mengadopsi secara alami karena kemungkinan penskalaan otomatis.

Tom
sumber
Terima kasih, ini memperbaiki masalah penskalaan pada iPhone, dan menampilkan potret dan lanskap secara berbeda (dan dengan benar).
SexxLuthor
0

Menambahkan ini untuk orang yang mencari kesalahan ini untuk siapa jawaban yang diterima tidak berfungsi. Saya percaya ini akan menjadi kasus yang lebih jarang, tetapi tetap membuat frustrasi:

Jika halaman Anda di-render dalam frameset (misalnya cloaking domain), maka meletakkan tag meta tidak akan membantu. Anda harus meletakkannya di halaman pada domain cloaking, yang Anda mungkin atau mungkin tidak memiliki akses bergantung pada host DNS Anda.

Hari Davis Waterbury
sumber
0

Coba bersihkan cache browser Anda dan buka halaman di tab baru. Ini terkadang menyelesaikan masalah untuk saya setiap kali itu terjadi.

John Q.
sumber