Problems with the "Not" operator in a media query

Question

I am working on a responsive website, and my client wants certain styles to be applied to the desktop with a resolution of 768 pixels, but not to a board of this size. I tried several media queries, but I can only get Firefox to work together. Chrome, Safari, and IE ignore the media request. Here is what I have tried.

@media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) { /* styles for desktop only here */ } 

I think this is due to the “not” operator, but I don’t see that I am doing something wrong. It's also worth noting that the ipad (in my simulator) ignores the media request, which is exactly what I want. I just can't get Chrome, Safari and IE to read dang stuff on my desktop.

Answer 1

Each line of Media Query, separated by commas, must be fully formed (I don’t know that in the specification everything is transferred from one to another ... although some browsers can support shortcuts here, it is reasonable to adhere to the lowest common denominator: specification). (Among other things, this makes testing easier, as simple text mods allow you to test a single media query at the same time.) And, of course, “only” and “no” are mutually exclusive parameters. So I think the syntax should be

 @media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) { 

(xxx-device-width: and xxx-width: [with the inclusion or exclusion of "-device"] refer to the width of the screen and the width of the viewport / layout, respectively [which are usually the same for "desktop" devices, and for most handheld devices computers, if "viewport" is specified content = "width = device-width"> gt; is specified, but may not match for smartphones without the "viewport" specification in the source HTML file of the page), I usually do not see a mixture of these two in one statement for Media Query, and therefore [although I have not yet tried to understand this example in detail], I suspect something is a little wrong.)

Answer 2

You cannot tell tablets and computers applications with permissions with permissions: there are too many different resolutions on different hardware and there is no real general rule (look here , and this is only Androïd!)

You should discover touch support using Javascript, add a class to your HTML tag and build your CSS on this basis, bearing in mind that this is not a 100% catch (there are touch computers.)

Try http://www.modernizr.com/ !