Why won't the Android browser span this paragraph over the full browser width?

Question

The Problem:

---

The Question

The paragraph will fill th

Answer 1

This is not a bug, you don't need a fix in ECMAScript to solve this.

You have to think about the tree in which your content resides.

window
 \- html
   \- body
     \- p
       \- content

So, your content's width is determined by the CSS attributes on the p element. So, as you will want the text to be as width as your browser's window is we can try to put its width to 100%; thus:

p { width: 100%; display: block; margin: 0px; padding: 0px; }

However, you will experience that this isn't working as you thought. This is however not a bug, but simply a misunderstanding of the standard. Let't have a look at what the standard has to tell us about setting a percentual width on an element, see the width property in the visual formatting model details:

<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.

Emphasis mine, this text says that it is calculated with respect to the width of the containing block. Looking back at our tree, p is contained within body. So, what's the width of our containing block?

We haven't defined that width yet, so it is taking on some value determined by the browser.

The solution here is to define the width of the body as well, which translates to adding 6 characters:

html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }

So, now your html's width is 100% of your window's width, body's width is 100% of your html and your p's width is 100% of your body. this should get all the width's right.

The bottom line is to think about your DOM tree and check out the CSS standard...

Answer 2

For android and small screens on default navigator, the paragraph is taken the device-width as p->max-width.

In my case I've solved with viewport and some javascript:

//NOTE: Take android boolean var from user-agent in request
var screenWidth=window.screen.width;
if (screenWidth<600 && android) {
    var node = document.createElement('meta');
    node.name="viewport";
    node.content="initial-scale=0.1, maximum-scale=3";
    $("head").append(node);
}

This is working for all my pages with some media queries for different dpi & device width height.

Answer 3

The other simple way to fix that bug:

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

blank.png is transparent 1x1px image.

Answer 4

I've found a solution to this issue that actually works!! This is actually a setting in the android browser "Auto-Fit Pages". Turning that off will resolve this issue with certainty.

Mike

Answer 5

After hitting this problem, Combining meta viewport and media queries provided the simplest solution. Just adding <meta name="viewport" content="width=device-width" /> to the source HTML provided in the question fixed the display in the Android browser (using an Android 4.2 virtual device). Quoting the above link:

Normally the layout viewport takes a width that the vendor has decided is optimal for viewing desktop sites.

By setting the meta viewport to device-width you’re sure that your site’s width is optimised for the device it’s being viewed on.

Answer 6

It's a bug; you have to force the height declaration to obtain the desired effect; I've made this fiddle.

So, I suggest you to use .height() metod in jQuery or other js framework to calculate the real height of the <p> and to add an inline style at fly. It's quite unobtrusive.

I hope I was helpful.