0

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?

Conner
  • 30,144
  • 8
  • 52
  • 73

1 Answers1

3

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.

CrazyVipa
  • 927
  • 7
  • 10
  • The code I posted above is actually working. See the referenced link beneath it in an Android browser. There's something else on my site that's messing things up (perhaps, as you said, things inside of the container like iframes). – Conner Jul 16 '12 at 22:16
  • This answer helped me understand the issue origin, thank you. – Shadow Nov 30 '12 at 10:34
  • 1
    This also helped me. It appears you cannot set `overflow: hidden;` on the ``. – Haroldo Jan 31 '13 at 10:03