Menu
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
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
553
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
Width: autoThe initial width of block-level elements like <div> or <p> is auto , which makes them take the full horizontal space of their containing block.
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); }
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
