Jump to content

Font Size Not Displaying Correctly On Mobile Devices?


Kervtuza

Recommended Posts

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 by Kervtuza
Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...