Question

Is there a way to query css-@media for ALL handhelds/smartphones independent of their sizes (width, height).

I know, I cannot use @handheld.

I have tried it this way:

@media only screen and (orientation: portrait) or (orientation:landscape){

}

and that way:

@media only screen and (max-device-width:3000px) or (max-device-height: 1300px){

}

but it does not work. I dont want to give a bunch of @media-queries related to a smartpone with dozens of different sizes. Is there a way to indicate a handheld by @media query? I dont want to use browser-sniffing via javascript.

Was it helpful?

Solution

All the media available are those, so I guess not :

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

From https://developer.mozilla.org/en-US/docs/CSS/Media_queries#Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top