Search code examples
htmlcssmedia-queries

At which devices is the 'screen' attribute (CSS media query) applied to?


I'm only interested in when and on what devices the 'screen' attribute is applied to. For example this:

1) @media (max-width:632px)

2) @media screen and (max-width:632px)

I know that according to this source , 'screen' in #2 means that it applies to devices that support a screen mode, e.g. my PC would display #1 and #2 the same way.

But on what other devices would #2 also apply to? According to w3.org it says:

"Screen: intended primarily for color computer screens.".

Does this apply to handheld too? Because they've got also a screen (a small screen). w3.org even says that handhelds have 'screen' too. What about smart watches? They also got a (tiny) screen, right?

I just wonder which computer devices don't have a 'screen' and that needs CSS for formatting content. I mean visuals can only be displayed on a 'screen'. It makes the attribute seem a little bit redundant.


Solution

  • CSS2.1 actually has a defined handheld media type, however, it's been deprecated in Media Queries Level 4 (despite it being a draft, its use should be avoided for future compatibility). If you take a look at the way screen is defined in Level 4, it states:

    'screen': Matches all devices that aren't matched by 'print' or 'speech'.

    So I think internally, the drafters realize previous definitions of the types have left a lot of ambiguity as to what the media types actually apply to.