Duyarlı web sitesi, mobil cihazda tam genişliğe kadar uzaklaştır

Bootstrap yanıt hızı navbar'ı test ediyorum ve bir demo web sitem var. Tarayıcıyı masaüstünde yeniden boyutlandırdığımda, daha fazla menü düğmesi görmek için tıklayabileceğim üstte küçük bir simgeyle katlanabilir menü haline gelen gezinme çubuğu da dahil olmak üzere her şey iyi çalışıyor.

Ancak bir mobil tarayıcıdan denediğimde (Android'de krom ve internet tarayıcısında denedim), duyarlı tasarımı görmedim. Masaüstünün web sitesi gibi çok küçük bir sürümünü görebiliyordum.

Biri neyi yanlış yaptığımı gösterebilir mi?

Bunu HTML başlığınıza ekleyin.

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

Bu, daha küçük cihaz tarayıcılarına sayfanın nasıl ölçekleneceğini bildirir. Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

burada önerildiği gibi http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

dikeyden manzaraya ve daha hoş bir kullanıcı deneyimini mümkün kıldığı için daha iyi bir seçim olacaktır.

Bunu, kabul edilen yanıtın çalışmadığı bu hatayı arayan kullanıcılar için ekler. Bunun daha nadir, ancak yine de sinir bozucu bir durum olacağına inanıyorum:

Sayfanız bir çerçeve kümesinin içinde oluşturuluyorsa (örneğin, alan adı gizleme), meta etiketleri koymak yardımcı olmaz. Bunları, DNS ana makinenize bağlı olarak erişebileceğiniz veya erişemeyebileceğiniz gizleme alan adındaki sayfaya koymanız gerekir.

Tarayıcınızın önbelleğini temizlemeyi deneyin ve sayfayı yeni bir sekmede açın. Bu bazen ne zaman olursa olsun benim için sorunu çözer.