Android browser creates horizontal scrollbar by default for responsive design

Question

The default Android browser shows my site wider and creates a horizontal scrollbar.

Here are screenshots of the problem: (Chrome browser vs. default browser)

My view:

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

What should I do?

Answer 1

Unfortunately, the default Android browser on devices prior to Lollipop does not support CSS . Assuming your search entry has a class and, given the screenshots, your CSS might contain something similar to this: calc().search-box

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

... 100px - .

, , Android :

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

Android width: 75% .search-box calc(), , 25%. , , 75%. , , Lollipop, 320px.

: calc() min-width, width. - , . . calc() Lollipop.

---

, , , , .content_product_title_and_price_section.

,

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

... . , , flex-wrap:wrap .content_product_title_and_price_section, 379px. . :

@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;
  }
}

margin-bottom,   , , . <span> s.

---

!::} < (((* > ::)

Answer 2

Andriod , div ,

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

, .

.

Answer 3

, , Chrome Android-. Google : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

, devtools "". body, . DOM devtools , . , " " " ". , , , - , .

, . , , , .

, ( ) , CSS devtool, .

Answer 4

display: flex; .content_product_title_and_price_section. firefox, display, display: -webkit-box;. -webkit-box -webkit-flex display: inline-block h3 span width: 75% h3 vertical-align: top .