What parameters does the css media type "handheld" care about?

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!

Playground

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.

Temptation

So I could write like "@media screen and (max-width:420px) and (max-width:7cm){style code}"? Or maybe I should only depend it on physical units, not pixels at all? – Playground

@Lindhe94 Well, it depends on what the results you're aiming for are. Really, for the purpose of adapting a layout to viewport characteristics, you should use the same units your style rules are defined in. I always work in em where possible, so I use media queries in em; I added a paragraph to my answer about that. – Temptation