Larger fonts for phones

HTML & CSS
1

I’m happy with the size of my site’s font on a laptop/desktop but it’s too small on a phone. Can I show a larger font size for phones?

2

Sure you can. Here’s an example:

@media only screen and (max-width : 560px) {
	body {font-size: 150%;}
}
3

Please forgive my ignorance but where should that line be written? I tried it in my external stylesheet but there was no affect.

What about the new phones with 1080p screens? This won’t apply to them even though the screen is physically small, correct?

4

That was the right place to put it. Usually that works for me. Make sure to refresh the page, and it it still doesn’t work, more investigation is needed. If fonts are set on various elements in px then it may not work (that’s the only time I’ve seen issues with this).

You can, of course, set different fonts sizes for each element in the same way. I just targeted the body element because it’s easier.

What about the new phones with 1080p screens? This won’t apply to them even though the screen is physically small, correct?

I can’t speak for all phones, but phones like the iPhone still obey rules like width: 320px even though they pack in far more pixels than that.

We’ll be happy to have a look if you want to post a link.

5

Implement his idea like this on your page above the </head> tag:

<style type=“text/css”>
body {
font-size: 100%
@media only screen and (max-width : 560px) {
body {font-size: 150%;}
}
}
</style>
</head>

6

If fonts are set on various elements in px then it may not work (that’s the only time I’ve seen issues with this).

My fonts are all set in em but I got it to work by changing max-width to max-device-width. Is there a difference or should that be OK?

I found this which seems to suggest using 568px:

http://stephen.io/mediaqueries/

I also noticed the page above uses min-device-width in addition to max-device-width but that isn’t necessary for what I’m doing, is it?

I can’t speak for all phones, but phones like the iPhone still obey rules like width: 320px even though they pack in far more pixels than that.

The page above mentions “Device-pixel-ratio” which confirms what you said. It sounds like these pixel measurements aren’t so much pixel measurements as they are screen size designations.

Thanks a lot for your help, I think this will help a lot when using the same site for desktop and mobile. Any other optimizations to consider for devices like phones with small screens?

7

Should this code trigger any non-mobile devices? This makes me wonder:

http://stackoverflow.com/questions/16310523/media-query-for-mobile-devices-but-not-retina-display

8

That’s not recommended by the expert I prefer to follow.

He recommends max-width in conjunction with the meta viewport element:

<meta name="viewport" content="width=device-width">
9

I think it depends on what you’re doing. If you’re setting up a full-blown responsive design site, max-width and viewport make sense. But my application is just increasing the font size on small screens. In that case I think max-device-width without a viewport setting makes the most sense and it should be relatively quirk-free.