media queries for smartphone portrait, landscape and desktop?

Question

I am trying to set different media queries for smartphone orientation and desktop, i want to target portrait and landscape. I am aware of all the other stack links such has:

Media query to target most of smartphone 3 media queries for iphone portrait, landscape and ipad portrait

But I am still having issues, my landscape one isn't working, this is the code I am using:

Desktop css first
   -- css for desk --

Portrait:

   @media only screen 
     and (min-device-width: 320px) 
     and (max-device-width: 479px) {

}

Landscape:

   @media only screen 
     and (min-device-width: 480px) 
     and (max-device-width: 640px) {

}

The landscape code is like not even getting considered

score 30 · Accepted Answer · edited Jul 11 '17 at 10:16

30

Try adding

orientation : landscape

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {

//enter code here
}

See this site or this snippet for reference.

edited Jul 11 '17 at 10:16

Siva-Dev-Wizard

127
1
10

answered Jul 03 '13 at 08:34

Danield

114,415
36
213
236

3

adding "and (orientation: landscape)" will have an effect on the desktop too tho – rob.m Jul 03 '13 at 08:35
1

but the width declarations will filter out desktop – Danield Jul 03 '13 at 08:36
1

This media query doesn't target any latest phones who have widths more than 480px in landscape – Muhammad Osama Nov 12 '19 at 11:34
If you're targeting landscape, is the width now the width in landscape? Or still the width in portrait? – Agent Zebra Apr 20 '22 at 17:03

score 6 · Answer 2 · answered Sep 22 '21 at 18:15

6

It's better to tackle the height than the width since the width has a large amplitude of sizes while 575.98px for mobile is, at least for now, a range that covers a LOT of devices.

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
//enter code here
}

answered Sep 22 '21 at 18:15

Luis Alves

1,215
1
10
14

This is what worked for me in the end. The height of the viewport is the real issue I was trying to tackle. – Matt Kaye Jan 18 '22 at 23:11
If you're targeting landscape, is the width now the width in landscape? Or still the width in portrait? – Agent Zebra Apr 20 '22 at 17:03

media queries for smartphone portrait, landscape and desktop?

2 Answers2