Why won't the Android browser span this paragr

The Problem:

enter image description here

The Question

The paragraph will fill the complete width of the page in

Firefox
Firefox Mobile (tested with 4.0.3 on SGS2)
Chrome
Chrome Mobile Beta (tested with 4.0.3 on SGS2)
Internet Explorer
Internet Explorer Mobile (testes with Windows Phone Emulator)
Opera Mobile (tested with 4.0.3 on SGS2)
Android native browser (tested with 4.0.3 on SGS2 and Android emulator)

What do I have to do so it does the same in the default Android browser?

I tried:

Please note that this example is reduced to show the problem which I have on a much larger page. So I would like the solution to be as little disruptive as possible. For example, setting all paragraphs on my site to float seems like a bad idea.

`width`

Increasing the value of the width property on the p CSS class has no effect.
Relative values: 100% and 1000% have no effect. Values <100% have an effect (paragraph becomes thinner).
Absolute values: 1000px doesn't expand the width, low values decrease it though.

`float`

When setting float : right; on the paragraph, it will display as desired:
enter image description here

CSS Reset

When I insert these CSS Reset styles, the width of the paragraph is unaffected.

`position`

When setting position to absolute on the paragraph, it will display as desired. But I'm unsure if that would be safe to generally have enabled.

The Source:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Android Browser Issue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      body {
        border : 3px dotted green;
        margin : 0;
        padding: 0;
      }
      p {
        border : 3px solid red;
        margin : 0;
        padding: 0; 
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

You can see it here: http://jsfiddle.net/EYcWL/embedded/result/ or go there directly: enter image description here

标签： android html css android-4.0-ice-cream-sandwich

8条回答

我想做一个坏孩纸

2楼-- · 2019-02-01 11:59

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.

0人赞添加讨论(0) 举报

可以哭但决不认输i

3楼-- · 2019-02-01 12:02

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.

0人赞添加讨论(0) 举报

老娘就宠你

4楼-- · 2019-02-01 12:04

This is not a CSS issue,

body, p { width: 100%; }

Doesnt seem to work, please see this screenshot.

However if you apply a background to the paragraph, it does then span fully.

This seems like a hack but I cant find any other solution.

 background: url('');

Not sure if that will display a missing image x icon on some browsers,
alternatively you could use an empty png.

0人赞添加讨论(0) 举报

We Are One

5楼-- · 2019-02-01 12:10

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

0人赞添加讨论(0) 举报

叛逆

6楼-- · 2019-02-01 12:11

The other simple way to fix that bug:

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

blank.png is transparent 1x1px image.

0人赞添加讨论(0) 举报

Animai°情兽

7楼-- · 2019-02-01 12:18

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...

0人赞添加讨论(0) 举报

1 2 下一页