Android Default Browser creates Horizontal Scroll Bar for Responsive Design

Question

Android's default browser, shows my-site wider and creates horizontal scroll bar.

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

My viewport is:

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

What should I do?

Is your site built with HTML5 and css3 or are you using es6 in js in order to alter or create your design? Can you share your HTML code — Ankit Arora, Apr 24 '17 at 17:34
@AnkitArora the site is wordpress 4.7.4, and everything I do is updating the current css and php files. Since html is created with php files of core wordpress, I don't think I can share html code, but I believe that css issues could be checked from page source code, with developer tools. I am confused why you need html code. — HOY, Apr 24 '17 at 20:41
sorry didn't see the URL in the question at first, there are some elements in HTML5 and CSS3 which are not yet supported by android default browser so i wanted to check if you've used one of these elements or not. You can use http://caniuse.com/# to verify if the support is available for your used element on the website or not — Ankit Arora, Apr 25 '17 at 09:36

score 2 · Accepted Answer · edited Nov 09 '21 at 02:50

Unfortunately, Android default browser on pre-Lollipop devices, does not feature support for CSS3's calc() function. Assuming your search input has the class .search-box and considering the screenshots, your CSS might contain something similar to this:

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

... where 100px is the width of your search button.

In order to fix this, you need to prefix the above declaration with one that the Android browser understands and can apply:

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

Now, the Android browser will apply width: 75% to the .search-box and will skip the calc() one, which it doesn't support, and the button will be displayed in the remaining 25%. Of course, you can set it to any other convenient value, other than 75%. Keep in mind the most wide-spread screen width on pre-Lollipop devices is 320px.

Note: your faulty calc() might actually apply to a min-width, not to a width. Since you haven't provided any code, this is as much help as I can provide. But I'm under the impression it's enough. The calc() problem is a common one when supporting pre-Lollipop default browser.

From the video you linked in the comments, it looks like your problem has nothing to do with the above, but is caused by the overflowing content from .content_product_title_and_price_section.

In order to fix it, you could add

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

...but this will hide the excess text of longer product titles. If you don't want that to happen, an alternative layout for narrow mobiles would be to add flex-wrap:wrap to .content_product_title_and_price_section, also under 379px. For this you might want to slightly adjust the layout of the image captions. This might work:

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

I added the margin-bottom so you don't have to manually remove the   from your markup, but I must point out they shouldn't have been there in the first place. You could have easily added a simple padding-left to your price <span>s.

Hi Andrei, thanks for the detailed answer but even I remove the search bar from the site, the same behavior continues. I don't think this is related to search bar and calc() function. — HOY, Apr 27 '17 at 13:07
@HOY The problem you are describing is not reproduceable on the site you linked. Is there any way I could inspect it? I'm believe I can help. — tao, Apr 27 '17 at 13:09
Hi Andrei, I use samsung galaxy s7, and my browser is default browser works like that. You may check from this video I recorded a few minutes ago. https://drive.google.com/file/d/0BwHDkPOX-lRtWUtZNmVleGZYbE0/view?usp=sharing — HOY, Apr 27 '17 at 13:33
@HOY, I've updated my answer. It looks like your problem has nothing to do with the menu. :) — tao, Apr 27 '17 at 13:44
The first did not work, I am not sure why. Second one works, but not exactly what I need. I am trying to have an affect similar to the following website: www.redbubble.com. — HOY, Apr 27 '17 at 14:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142836/discussion-between-hoy-and-andrei-gheorghiu). — HOY, Apr 27 '17 at 14:06

score 0 · Answer 2 · edited Nov 09 '21 at 02:50

0

I don't have an Andriod browser to test this, but you could try setting a max-width for the search div, eg

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

This is easy to do and if it helps you could refine the sizing.

edited Nov 09 '21 at 02:50

Nimantha

6,405
6
28
69

answered Mar 19 '17 at 01:08

David Taiaroa

25,157
7
62
50

score 0 · Answer 3 · answered Apr 20 '17 at 16:00

The first thing you want to do is set up mobile debugging in Chrome and connect your Android device. Google provides detailed instructions for that here: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Once you have your device hooked up, open your devtools to the 'elements' tab. Scroll to the 'body' tag area where your presentation markup is. Now just right click elements in the devtools DOM and delete them until the scroll bar disappears. It works best to start with the main elements like 'header-area' or 'main-content-area'. When the scroll bar disappears, you know either the element you deleted or a child of that element is what is breaking your layout.

Refresh your page and delete elements inside of the one that caused the scroll bar. You know the issue is the parent element if the bar doesn't disappear when all the child elements are deleted.

Once you know which element(or elements) are breaking the layout you can adjust the CSS in your devtool then change your source accordingly.

Hi , the site works fine with google chrome, as I showed in the image above. How will I test "android default browser" issue with this approach? Is there a misunderstanding ? — HOY, Apr 20 '17 at 16:30
When you set up remote debugging you can inspect the content on your Android device in your Chrome browser in real time. This gives you access to all the developer tools you normally use to debug websites but you can use them for your Android device viewport to track down the problem element and make adjustments. Here is another post with similar question. I just found another post that might be more clear: http://stackoverflow.com/questions/2314886/how-can-i-debug-javascript-on-android — CaptainJ, Apr 21 '17 at 14:19

score 0 · Answer 4 · answered Apr 26 '17 at 20:22

You have a problem with your display: flex; properties on your .content_product_title_and_price_section. You can reproduce the exact behaviour in firefox if you disable all the display settings except the display: -webkit-box;. I would remove this old -webkit-box and go with -webkit-flex only, or try to achieve the same effect with display: inline-block on the h3 and the span and add a width: 75% to the h3 and vertical-align: top to both.

Android Default Browser creates Horizontal Scroll Bar for Responsive Design

4 Answers4