CODEWITHSUNDEEP
mobilebrowserxhtml
riseagainst
riseagainst

Reputation: 430

Text inside <p> shrinks on mobile devices while div does not

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.

enter image description here

On a Pc, as it should be:

enter image description here

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.

Upvotes: 12

Views: 4315

Answers (7)

pii_ke
pii_ke

Reputation: 2881

Try specifying the widths in relative units like %.

as here:

width:100%; for first div and..

width:75%; for the div inside it

Upvotes: 0

skulptron
skulptron

Reputation: 21

I found that when I use

text-align: center;

everything is OK, but when I use

text-align: left;

text is shrunk (Android 4.1 browser)

Need to research a bit more...

Upvotes: 0

Rafe
Rafe

Reputation: 9275

I had a problem nearly identical to this on Droid Razr (Droid OS 4.1.2) - stock browser. It turned out to be a problem with the browser itself - corrupted settings or something. Going to Settings > Advanced > Reset to Default > OK fixed the problem.

Upvotes: 0

Qvcool
Qvcool

Reputation: 458

The mobile web browser scales the page automatically so that the user can see the text more clearly. If you want to prevent the text from scaling, add this code in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 1

Fireblaze
Fireblaze

Reputation: 242

It might be a text zoom thing in Webkit try adding the css:

  • { -webkit-text-size-adjust: 100%; }

or

  • { -webkit-text-size-adjust: none; }

Upvotes: 0

opalenzuela
opalenzuela

Reputation: 3171

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.

Upvotes: 5

Matthijs
Matthijs

Reputation: 146

Add

<meta name="viewport" content="width=device-width, initial-scale=1">

To your page.

Here is a good read about the viewport meta tag: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Upvotes: 0

Related Questions