Mon, 2012-04-30 17:13
Hi,
I have recently converted my website, www.jertix.org to responsive web design, however I can't understand how to get the font size right on Smartphones.
For example, when I open the website with my Google Nexus, I see a very small text. If I set it to 1em, which I guess would be 16px, it is really small. So now I have changed it to 1.4em with:
@media screen and (max-width: 800px) { body{font-size: 1.4em} }
I can see on websites like css tricks and smashingmagazine that the text is really big and easy to read. What am I doing wrong?
Another issue, why is my mobile using max-width: 800px of resolution instead of smaller resolution I've set up in the css, like 640 or 320? Is there something wrong with my media query declaration?
Thu, 2012-07-12 06:42
#1
Hi microcipcip, Have a look
Hi microcipcip,
Have a look at this example @media page in different browsers/devices.
I think what you should have been doing was using min-width and setting the initial scale:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
See also:
@media