Login/Register
How to target only landscape mobile devices without affecting desktop via CSS?
Asked Answered
Solved cssmobilemedia-querieslandscapeportrait
N

4

6

Is there a simple way to target landscape mobile devices without affecting desktop ones, without entering the screen size for every device?
If not, is there a single best resolution to target most of the users?
Nowadays mobile screens can have a resolution equal or grater than most desktop screens, I can't see why many use rules for resolutions below 640x480.

For example, to target portrait devices (99% are mobile), one could write his rules in 

/*Global and desktop rules*/

@media only screen and (orientation: portrait) {
/*Mobile overwrites*/
}

However, the same query for orientation: landscape would affect desktop users as well.
My temporary workaround is to use vw, vh and vmin, but I would like to know if there's a better way.

Would a mobile CSS media simplify web developers' job?

Nightmare answered 3/6, 2020 at 20:30 Comment(0)
J
20

You can mix CSS Media Queries for orientation to detect landscape mode and hover + pointer to detect a touch device.

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
}

For a reference to detect a touch device with only CSS here's a good article on medium.

The best solution is to use JavaScript to detect the device and add a class to the <body> or the <html> in order to add your CSS. You can have a look at current-device, you just include the script, that then updates the <html> section with the appropriate classes based on the device's characteristics.

Hope this helps.

Jewess answered 3/6, 2020 at 22:4 Comment(0)
L
2

There is a query @media pointer, which determines whether the the user has a pointing device (like a mouse). Since mobile devices don't have a pointer, you could combine not: pointer and orientation: landscape, like this

 @media (not: pointer) and (orientation: landscape) { ... }
Lasky answered 3/6, 2020 at 22:54 Comment(0)
E
0

You can use the min-resolution media feature to target devices with a high pixel density screens (i.e. most modern mobile devices) and the orientation media feature to target those devices in landscape mode.

@media screen and (orientation: landscape) and (min-resolution: 240dpi) {
   /* CSS rules for mobile devices in landscape orientation go here */
}
Erlina answered 25/4, 2023 at 13:3 Comment(0)
T
-2

Try this:

    @media (orientation: landscape) {    

}
Tovatovar answered 3/6, 2020 at 20:47 Comment(1)
This affects desktop devices as well – Nightmare

© 2022 - 2024 — McMap. All rights reserved.