Menu
The paragraph will fill the complete width of the page in
What do I have to do so it does the same in the default Android browser?
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.
widthIncreasing 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.
floatWhen setting float : right; on the paragraph, it will display as desired:
When I insert these CSS Reset styles, the width of the paragraph is unaffected.
positionWhen 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.
<!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: 
856
Your CSS should work in all browsers as is. It may not display the same from browser to browser. Most developers use a reset to fix that issue.
It look different because each browser has his own CSS style defined. This styles apply to the HTML markup when no other CSS is defined inline or comes from an external CSS file.
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
70
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
