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?

ralphm
—
2013-06-16T23:13:41Z —
#4

tonearm said:

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

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.

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

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

tonearm
—
2013-06-18T16:58:29Z —
#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.