Can't get my font-size to scale properly on iPhone

0
votes

My website is all messed up for my iPhone and Samsung Galaxy S2. I have created a sort of responsive website which adjust the sizes of everything properly apart from the sizes of each font, more specifically when in portrait on my iPhone 5s the text is too small, however if viewed in landscape the font-size is just right, same for my SGS2. Also another problem I have is when I load the page for the first time on my iPhone and SGS2 I have to zoom out first because it shows only a certain percentage of the page.

Please help, I have been trying to sort this out for ages now. Here is the link to the website I'm talking about.

Oh, also when I view the website on my laptop the font-size is just perfect but then I guess the window isn't to scale.

Let me know if you want me to include all the HTML and CSS

1
htmlcssresponsive-designfont-size

1 Answers

0
votes

You could use some viewport properties :

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />

You can also set stylesheet for handeld devices.

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

Documentation links below are useful :

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

http://www.html5rocks.com/en/mobile/mobifying/