Font Size Not Displaying Correctly On Mobile Devices?

[Kervtuza]

Hey Guys,

 

I always seem to run into a problem when styling text where everything is fine in a regular browser but in a mobile browser certain text are displayed at random sizes.

 

http://www.jasonkervin.com/projects/groundfx/abe2013/pages/contact.html

 

This is one of the examples I am talking about, I use Google Chrome on both my PC and Android phone, but on the android phone the text sizes are all out of whack even though they are using the same style.

 

Any ideas?

Edited March 24, 2013 by Kervtuza

[Andrea]

I pulled the page up on my iPad in Chrome and Safari, and it looked fine.

Is all the font messed up, or only certain words? Messed up how?

[Kervtuza]

Well when I view it on my phone is displays "we are always glad to hear from you" larger than the first paragraph, but they both have the same font-size: 11pt; what is the preference of measurement for using font size, px pt or em?

[grabenair]

I looked at your site on my android phone. What you need is called responsive web design. I have a small article on my site about it and a page you can navigate to to se it in action. The page uses jQuery. You do not have to use jQuery you can use media queries. They work like this.

@media screen (min-width: 520px) and (max-width:699px) { code goes here}

What you put in code goes here is css changes to make the site work the way that you want on each device. This is a vast subject. I could sit here and write for a few hours on it, but I put that little bit of code here for you know what you are looking for when Goggling responsive web design.

This is just a little advice. I would put all of your css in one file, this helps speed up load time.

Also the media queries will go at the bottom of your css. To get to my site to see what I am talking about the link is at the bottom in my signature.

For font size points are for print. For web use em or px. An em is the size of the letter m in whatever font you are using. A px is well you know. Also and this is for ie in the body css put in a default font size using px. This is because ie can have problems when everything is in em's.

Edited March 25, 2013 by grabenair

[Kervtuza]

This is great information, thank you!

[Andrea]

I don't know anything about what Grabenair said one way or the other, but I do note you have an incorrect doctype. Now it's missing the path, and I'm almost sure it was there the first time I looked. Also, you are using at least one HMTL5 tag - <header> and should probably use the proper HTML5 doctype, not a broken traditional one.

 

And - the p tag before your trouble text has a width applied, the 'glad to hear from you' line does not. Have you tried to add/remove the width and see what happens?