媒体查询以狭窄的台式机而非移动设备为目标

Question

Let's say I have the following code:

@media (max-width: 1024px) {
   div {
      color: green;
   }
}

Is there any way to add a condition to the media query to exclude mobile devices?

... or will I have to override this explicitly within the media queries containing the mobile css code?

Increasing specificity in the mobile code is not what I'm after because the properties which I'm setting in the desktop code may not be set at all in the mobile code.

I also realize that with the mobile first approach this problem wouldn't even arise. (But this approach isn't used in my case)

So is the only way to do this by overriding the desktop css rules in the mobile rules?

Edit : So it seems you can't do this with just CSS... that being the case, what what be a good javascript solution?

Answer 1

I just realized that I'm using Modernizr anyway. So I think the best solution for me would be to use Modernizr to detect touch devices. Like so:

1) First check touch events

2) Click the generate button

Just to demonstrate this, I copied the generated javascript into a jsbin

Now right-click and inspect the html element. Modernizr adds the class 'no-touch' on desktop and the class 'touch' for phones and tablets (touch devices)

So now I can use code like this:

@media (max-width: 1024px) {
   .no-touch {
      div {
         color: green;
      }
   }
}

Answer 2

you can check this out. This question states a similar problem like yourself. It might help. Check the comments and answer. Media query to differentiate desktop from iPad in landscape mode . Also check this article for media queries http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ . You can use min-width and max-width together. But landscape mode for iPads will come into it.

Answer 3

I started with using keyword Not - to reverse the logic with @media query not handheld and (max-width)... in media queries, but iPhone, Nokia etc don't consider themselves as handheld so that solution was not working.

Finally I came up with this solution.

Using

@media only screen and (orientation : portrait){ 
/* codes here to target mobile/tablet devices, as they are held in portrait mode, 
   unless user changes to landscape mode */
}

@media only screen and (orientation : landscape) and (max-width: 1024px){ 
/* codes here to target desktops/laptops devices, as they are in landscape mode, 
   unless user changes to portrait mode which rarely someone does by a multiple key combinations */
}

Note :

This solution fails if :

• Your website/app can be used for both landscape and portrait mode on mobile devices and user changes the orientation by rotating the mobile/tablet.

(remember you can always restrict user for portrait mode only)

• If a user on desktop/laptop changes screen orientation

(which rarely one does without any necessary requirement.)

Answer 4

@Gaurav, Please go over this link. Very usefull information.

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://foundation.zurb.com/docs/media-queries.html

And apart from that if you are using only width not Device-width then it will only target the desktop browser.