android autofit mode causing issues with css width in web page

15,080

Solution 1

Just furthering the answers above which worked for me with an important caveat: the redraw time in IE8 makes the 1x1 transparent pixel method unusable on that target on a decent size canvas.

Since CSS can't detect auto-fit, or android browsers (chrome on Android seems fine anyway), my workaround was to

  1. target smaller devices (since IE8 tends to be desktop), and
  2. only target the relevant 'p' tags (autofit only targets some 'p' tags), so if we apply this fix only where it is needed then we keep the redraw performance impact as low as possible.

My workaround (based on Demetic's answer above):

/* work around mobile device auto-fitting */
@media only screen and (max-device-width: 800px) {
   #content p {
       background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); 
       background-repeat:repeat;
    }
}

On my website '#content' is where the 'p' tags reside that are being auto-fitted, naturally you'd need to change this. 'body' will work, yes, but the more specific the lower the impact on redraw time.

It may be worth adding in a portrait-only detection mode since auto-fit doesn't seem to be targeted at landscape - but I haven't tested it on enough devices to confirm that this is always true.

Solution 2

I have been experiencing this problem and found a solution that works for me.

I have one main <div> with some nested <div> elements inside. The HTML is very basic. I found that one <div> within my main <div> would wrap its text as if I had double-tapped the text to zoom in on it. This <div> only contained text. This behavior occurred only in portrait orientation, and it corrected after double-tapping or switching orientation.

Since this problem is an Android bug, no CSS or HTML can really fix it. However, the following CSS resolved the problem satisfactorily for me; and I didn't have to turn off "Auto-fit pages":

I added a CSS background-image to the <div>. I just used a transparent, one-pixel PNG as the background.

div { background-image: url(../img/blank.png); }

Solution 3

I just wanted to confirm that Delbert's solution was the only thing that worked for me. It's not completely apparent as to why this works, but it works. I've done some fairly exhaustive searching on the issue, and the links from Tom's original post seems to include about all there is out there.

For what it's worth, I tried some fairly aggressive attempts at correcting the width of some <p> tags nested deeply within a chain of <div> tags using some of the proposed solutions here:

* { background-color: transparent; } did not work for me. However, * { background-image: url("/image/pixel.png"); DID work for me (where pixel.png is a 1x1 transparent PNG). I eventually relaxed this to apply only to my nested <p> tags, and found that my paragraphs were finally spanning the intended, correct width.

I also confirmed that the behavior is a result of the "Auto-fit web pages" setting. I do not own an Android, but experienced these issues using the emulator.

Thanks again to Delbert for the tip.

Solution 4

Same problem here. The content within my <p> tags is smushed to left side. No good solution found yet though I've found that if I add a background color to my <p> tag it "fixes" the issue. I'm still trying to find a real fix though since adding a background color is not ideal.

Solution 5

*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}
Share:
15,080

Related videos on Youtube

Tom
Author by

Tom

A dedicated developer with a passion for front end and mobile technologies. I'm currently specialising in React and React Native, but I'm also happy reaching up the stack, and always on the look out for new upcoming tech.

Updated on June 04, 2022

Comments

  • Tom
    Tom almost 2 years

    I am having problems with the auto resize feature of the android browser. The widths on my site are going a bit haywire when the device is in portrait mode.

    What I would like to do is

    • Have the same version of the site for both desktop and mobile users.
    • Allow the user to zoom in and out as they please.

    I currently have the following in my head

    <meta name="viewport" content="width=1100">
    

    I found the following blog post which describes my problem.

    This is definitely caused by the auto-fit layout ("kLayoutFitColumnToScreen" in the Android WebKit source code). Just try the test with auto-fit disabled and everything is rendered correctly (at least on my Android device).

    The auto-fit mode on Android seems to shrink certain elements' width without affecting their positioning, or the positioning of other elements. So if you have a containing block with width: 1000px and text that spans 100% of that width, the container may remain 1000px wide but the text inside it will wrap at the screen width.

    http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html

    Is there a way to stop this autofit mode from kicking in? I don't want to disable zooming.

    Update:

    I am still searching for a solution if anyone knows of one.

    Have found someone with the same problem (although they are using tables)

    Spanned columns collapsing on Android web-browser (when using auto-fit pages)

    http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

  • rat
    rat almost 12 years
    Thanks for this; I spent like 4 hours trying to figure out wtf was going on with my text wrapping like 1/3 the way across the screen >:|
  • raphinesse
    raphinesse almost 12 years
    Just add background-color: transparent if you don't want an actual background color. Works fine for me.
  • Mohamed Hafez
    Mohamed Hafez over 10 years
    Awesome thanks! one question though: do we really need background-repeat:repeat ? It seems to work fine for me without it but wanted to check if there were some use cases you had found where it was needed.
  • Mendhak
    Mendhak almost 10 years
    Thanks. In my plain text-rich page, I had to add it almost everywhere. p, em, i, strong, h2, h3, a, li, div { background: url('/images/x.png'); }