Menu
Does anybody know whats happening here? I tested on opera, dolphin and the factory android browser. (although it seems now to be working on opera)
The div doesn't change size, but the text somehow is shrunk to fit on part of a div. Anyway to prevent this?
Just to be clear, I'm trying to achieve on the mobile browser the same look as the pc version.
As the problem seems to be with the browsers, how can I force the text to take the full width of the div? I tried setting the p tag to 100% with no success.
The div has to have that width and be aligned to the left of the page.
*Update 1: I tried the following code on a galaxy s4 (previously tried on s2) and got the same error on opera mini and dolphin. The error can be visualized online using the opera mini simulator, you just need to host the html file somewhere.
*Update 2: I believe the problem exists because when the webpage is loaded, it is loaded at its normal size (pixels), so the paragraph only occupies a small part of the page. Then, the page zooms out so all the content fits the page, but the text does not spread, it stays in that initial small space.
On a Pc, as it should be:
I shrunk the code as much as I could:
<!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" lang="en-us">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<title></title>
</head>
<body>
<div style="width:1000px; margin-left:auto; margin-right:auto;" >
<div style="float:left; width:758px; background-color:aqua;">
<p>
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text .
<br />
<br />
Random text Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text .
<br />
<br />
Random text Random text Random text Random text
<a href="http://www.a.com/a.html">
Random text </a> Random text
Random text .
</p>
</div>
</div>
</body>
</html>
Thanks.
461
Better start applying HTML5, and the proper doctype:
<!DOCTYPE html>
Then tune the viewport, so it can be applied:
<meta name="viewport" content="width=device-width, initial-scale=1">
I don't have Opera Mini to test, but according to the compatibility table it should be working.
195
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
