CODEWITHSUNDEEP
androidhtmlcsslayoutandroid-browser
Conner
Conner

Reputation: 31040

Android browser not respecting overflow: hidden with max-width

I'm trying to make my blogs readable on an android browser, but it always ends up needing to scroll horizontally. Right now, my solution is working in chrome so that when I resize the window to a width smaller than the article content the article will shrink with it without a horizontal scrollbar. You can see an example of a blog article here.

If I do this:

<head>
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; minimum-scale=1.0; user-scalable=yes;" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

   <style type="text/css">
      body {
        overflow: hidden;
        margin: 0;
      }

      #container {
        max-width: 650px;
        margin: auto;
      }
   </style>
</head>
<body>
   <div id="container">Content goes here.</div>
</body>

then it works as seen here, but something else in my page is messing things up. In chrome, I'm getting the effect I want, but when I open the page on an android browser I have to scroll horizontally.

Edit: I traced this down to the facebook iframe. Anyway to get around this?

Upvotes: 0

Views: 7468

Answers (1)

CrazyVipa
CrazyVipa

Reputation: 927

I have the same issue occasionally where android completely ignores overflow command. I think the first issue is using overflow hidden on the body, and not an internal element.

I would change:

<style type="text/css">
   body {
     overflow: hidden;
     margin: 0;
   }

   #container {
     max-width: 650px;
     margin: auto;
   }
</style>

To this:

<style type="text/css">
   body {
     margin: 0;
   }

   #container {
     overflow: hidden;
     max-width: 650px;
     margin: auto;
   }
</style>

Be careful what goes into the actual "#container" div. While it will probably display off screen, I was never able to fix a bug with object tags (flash video players). Over flow is a pain for mobile. If possible, I would develop fluid and go from there. No real need to set a max-width in that case -- and it will allow the user to browse the website as they want.

Upvotes: 3

Related Questions