0

I would like to write a CSS media query that matches all devices with at least a 800px width and 800px height. The purpose of this media query is to target tablets and exclude phones. I do not need to worry about desktops in this case, since I am only targeting mobile devices.

I started with:

@media all and (min-device-width: 800px), all and (min-device-height: 800px)

...but I don't believe that will work because it will be true if either of the two conditions are met (logical OR).

So my next guess would be:

@media all and (min-device-width: 800px, min-device-height: 800px)

What is the syntax for an AND and not an OR?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
mattwindwer
  • 929
  • 9
  • 18

2 Answers2

3

Remove the commas from your declaration

@media all and (min-device-width: 800px) and (min-device-height: 800px) {
  //...........
}

Read this doc for more info

Starx
  • 77,474
  • 47
  • 185
  • 261
1

try this.

You may not need to check for the height though, do you have access to any devices that are 800px wide with a height of less than 800px?

@media screen and (min-width: 800px) and (min-height:800px)
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Richard Askew
  • 1,217
  • 1
  • 10
  • 16
  • The reason I am checking for both is because what is considered to be the height and width will vary depending on what orientation the device is in when the app is started (it is wrapped in PhoneGap) – mattwindwer Apr 19 '12 at 18:42