Question

I need to change style on a page depending on if it’s a handheld device (such as a cell phone) or a large screen device, such as a laptop, stationary pc or a tablet.

I know I could detect the resolution by the css max-width query and alike, but that does not feel convincing. Mainly because today’s smartphones have such high-res screens. I.E. the Sony Xperia S, it has got a 720p by 1280 screen, but it’s only 4,3″. Whereby a 10px font, which on a normal computer screen would be readable, will become too small to read.

Therefore I need to know a bit more than just the resolution to know whether it is a small screen device or not. (and I assume the media=”handheld” css style is the way to go. Please correct me if I’m wrong).

So: what parameters does the css media type “handheld” care about?

• Device screen size?
• Browser window size?
• Bandwidth?
• Is the information whether the device is “handheld” or not just a parameter that’s passed by the client?
• Are tablets included as “handheld” devices?

etc.

Thank you!

Answer 1

The handheld media type is largely useless, because current generation smartphones and like devices (at least Android and iOS stock browsers) do not use it to avoid being given super-minimal formatting designed for older devices.

I recommend using media queries. Note that you can query the resolution as well as the size, and you can query the size in physical units (in, pt, cm) as well as pixels. (I don’t know whether devices report reasonably accurate physical unit sizes, however.)

However, whenever practical, you should not design for particular devices but so that your site works well at any scale (the current buzzword for this is responsive design, and much has been written on techniques for this). My personal approach is to write my style sheet almost entirely in terms of em (line height units), and then use media queries to switch out the layout in cases where a particular layout only works well on a certain size range; and since the size is defined in terms of em, the media query should be written in terms of em as well. The advantage of this is that the font size is a reasonable proxy for what is a reasonable display size for items on screen — reflecting the viewing distance and (if the user has taken the time to configure their browser) the user’s eye/hand abilities.