Android Varsayılan Tarayıcı, Duyarlı Tasarım için Yatay Kaydırma Çubuğu oluşturur

Question

Android'in varsayılan tarayıcısı, sitemi daha geniş gösterir ve yatay kaydırma çubuğu oluşturur. İşte

sorunun ekran: (varsayılan tarayıcı vs Krom)

Benim görünüm alanıdır:

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

ne yapmalıyım?

Answer 1

Maalesef öncesi Lollipop cihazlarında Android varsayılan tarayıcı, CSS3 encalc()fonksiyonu için destek özelliğine sahip değil. Arama girişini varsayarsak sınıfı .search-box sahiptir ve ekran görüntüleri dikkate CSS buna benzer bir şey içerebilir: 100px arama düğmesinin genişliği

.search-box { 
    ... 
    width: calc(100% - 100px); 
    ... 
} 

....

Bunu düzeltmek için, Android tarayıcı anlar ve uygulayabilirsiniz biriyle yukarıdaki bildirimin önüne gerekir:

.search-box { 
    ... 
    width: 75%; 
    width: calc(100% - 100px); 
    ... 
} 

Şimdi, Android tarayıcı .search-box için width: 75% uygulayacak ve atlar calc() o desteklemediği biri, ve düğme kalan 25% görüntülenecektir. Tabii ki, 75%'dan başka herhangi bir uygun değere ayarlayabilirsiniz. Lollipop öncesi cihazlarda en geniş ekran genişliğini aklınızda bulundurun. 320px.

Not: Hatalı calc(), width'a değil, min-width için geçerlidir. Herhangi bir kod sağlamadığınızdan, bu benim sağlayabildiğim kadar yardımcıdır. Ama izlenimin altındayım, yeterli. Lollipop öncesi varsayılan tarayıcıyı desteklerken calc() sorunu yaygındır. yorumlarınızla bağlantılı videodan

---

, Bu senin sorunun yukarıdaki ile ilgisi var gibi görünüyor, ama .content_product_title_and_price_section dan taşan içerik kaynaklanır.

düzeltmek için, sen

@media(max-width: 379px){ 
    .content_product_title_and_price_section h3 { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    } 
} 

eklemek olabilir ... ama bu uzun ürün başlıklarına aşırı metni gizler. Bunun olmasını istemiyorsanız, dar cep telefonları için alternatif bir düzen de flex-wrap:wrap'u .content_product_title_and_price_section'a ek olarak 379px'un altına eklemektir. Bunun için görüntü başlıklarının düzenini biraz değiştirmek isteyebilirsiniz.

@media(max-width: 379px){ 
    .content_product_title_and_price_section { 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    } 
    .content_product_title_and_price_section h3 { 
    margin-bottom: -2rem; 
    } 
} 

Ben margin-bottom nedenle el işaretlemenizdeki   kaldırmak gerekmez ekledi, ama onlar orada ilk etapta olmamalıydı işaret gerekir: Bu işe yarayabilir. Kolayca <span> s fiyatınıza basit bir dolgu malzemesi ekleyebilirsiniz.

---

Mutlu kodlama! ::} < (((*>.:. :)

Answer 2

Bunu test etmek için Andriod tarayıcı yok, ancak arama div için max-width ayarlamayı deneyebilirsiniz, örneğin

#search-bar-mobile { 
    max-width: 70%; 
} 

Bu yapmak kolaydır ve yardımcı olmadığını hassaslaştıracağınız olabilir boyutlandırma.

İyi şanslar

Answer 3

Chrome'da mobil hata ayıklama ayarlandı yapmak ve Android cihaz bağlamak istediğim ilk şey. Google, bunun için ayrıntılı talimatlar sağlar:https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Cihazınızı bağladıktan sonra, cihazlarınızı 'öğeler' sekmesine açın. Sunum işaretlemenizin bulunduğu 'body' etiket alanına gidin. Şimdi, devtools DOM'daki öğeleri sağ tıklayın ve kaydırma çubuğu kaybolana kadar bunları silin. En iyi 'başlık alanı' veya 'ana içerik alanı' gibi ana unsurlarla başlamak için çalışır. Kaydırma çubuğu kaybolduğunda, sildiğiniz öğenin ya da o öğenin alt öğesinin düzeninizi bozan olduğunu bilirsiniz.

Sayfanızı yenileyin ve kaydırma çubuğunun neden olduğu öğenin içindeki öğeleri silin. Tüm alt öğeler silindiğinde çubuk kaybolmazsa, sorunun ana öğe olduğunu biliyorsunuz.

Eğer o zaman buna göre kaynağını değiştirmek için DevTool CSS ayarlayabilirsiniz düzeni kırarak hangi eleman (veya öğeleri) öğrendikten sonra.

Answer 4

Sen .content_product_title_and_price_section üzerinde display: flex; özelliklere sahip bir sorun var siz display: -webkit-box; dışındaki tüm display ayarlarını devre dışı bırakırsanız ateş kesin davranışı yeniden I çıkarıyoruz Bu -webkit-box eski ve tek veya h3 üzerinde display: inline-block ile aynı etkiyi ve yayılma sağlamak ve hem de bir h3 için width: 75% ve vertical-align: top eklemeyi deneyin -webkit-flex ile gitmek.