I am working on a responsive site and my client wants certain styles to apply to the desktop at 768px but NOT to tablets at that size. I've tried multiple media queries but I can only get Firefox to cooperate. Chrome, Safari and IE all ignore the media query. Here is what I 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 it has to do with the "not" operator but I don't see that I'm doing anything wrong. It's also worth mentioning that the ipad (in my simulator) ignores the media query which is exactly what I want. I just can't get the Chrome, Safari and IE on my desktop to read the dang thing.
Each and every Media Query string separated by commas should be fully formed (I'm not aware that in the spec anything carries over from one to the next ...although some browsers may support "shortcuts" here, it's prudent to stick to the lowest common denominator: the spec). (Among other things this makes testing easier since simple text mods allow you to test one Media Query at a time.) And of course "only" and "not" are mutually exclusive options. 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 inclusion or exclusion of "-device"] refer to the screen width and the viewport/layout width respectively [which are typically the same for "desktop" devices, and for most handhelds if <meta name="viewport" content="width=device-width"> was specified, but may not be the same for smartphones without the "viewport" specification in the HTML source of the page). I don't typically see a mixture of the two in a single Media Query statement, and so [even though I haven't yet tried to understand this example in detail] I suspect something is a bit awry.)
You can't tell appart tablets and computers with resolution media queries : too much different resolutions on different hardware and no real common rule (have a look here, and that's only Androïd !)
You should detect touch support with Javascript, add a class to your HTML tag and build your CSS on this basis, bearing in mind it's not a 100% catch (there are touch computers.)
Try http://www.modernizr.com/ !
Other answers have suggested alternative approaches. I'll try and explain why what you were trying didn't work (as expected). I think this would be useful for people trying to get not working in media queries.
Negation of media expressions (individual parts like (min-device-width: 768px), as opposed to media queries, which are the full items in the comma-separated list, like only screen and (min-width: 768px)) requires CSS Level 4 which (AFAIK) is currently only supported in Firefox.
CSS Level 3 does support negation of full media queries (only), but if you use the not operator, you must also specify a media type.
So a Level 3 media query for 'not a tablet-sized device' would be not all and (min-device-width: 768px) and (max-device-width: 1024px) (or not screen and ... as suggested in #Chuck Kollars' answer).
not (min-device-width: 768px) and (max-device-width: 1024px) is not a valid Level 3 query but is a valid Level 4 query. However, not has greater precedence than and so it actually means (not (min-device-width: 768px)) and (max-device-width: 1024px) which is not what you intended.
The inner CSS rules are applied whenever any of the media queries in the list match. In other words, the comma (,) acts like an or operator. So what you were trying actually means 'at least 768px wide, or not a tablet', which will match almost everything (or would do with the media type added to the second query so it can be parsed by Level 3 browsers).
The only way I can think of to achieve what you were intending with CSS Level 3 would be something like
#media screen and (min-width: 768px) and (min-device-width: 1025px),
screen and (min-width: 768px) and (max-device-width: 767px) {
}
(Though the second media query now looks probably superfluous and unlikely to match.)
But as stated in #mddw's answer, this won't exclude all tablets and may even exclude some other devices.
Related
This is the same media query I've used for all my other WordPress sites but for some reason it's not working for this particular site.
Often I can get away with just using:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){}
But I've tried that, and I've tried:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {}
But neither are registering. It's not a cache issue, either.
Additionally, for some reason when I inspect the site, everything lists as being received from site/style.css:1 even though my code is around line 604.
It was retrieving the css from all of the desktop styling, so as a test I added #media only screen and (min-width: 1025px) {} to my desktop styling, just to cancel it out, and sure enough, now my landscape header is all reverted back default styling (full sized image, default h1 styling, etcetera). Nothing I do triggers the landscape media query, even though the rest are called without any issues at all. I'm about to pull my hair out, and I can't find anything else on Google that quite fits as a solution.
The mobile and iPad Portrait media queries are working perfectly.
Any help is appreciated!
As I can't comment yet:
Do you use any sort of minifying? And are you sure that your .css file has no errors? With both these questions I'm referring to the style.css:1 thingy.
I want to exclude iPads from using my CSS styling for desktop views on my website. I built my site mobile-first, so the desktop styles are in a media query.
While messing around with my code I tried this:
/*mobile and default styles (the styles I want the iPads to use)*/
#media (min-width: 750px;),
#media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/ {
/*desktop styles (the styles I don't want the iPad to use)*/
/*in this code, these styles are currently being ignored by iPads*/
}
I don't think this is valid code but it works correctly in every browser and device I have tested.
It has to do with having two #media lines on one media query. The second set of parameters are somehow excluded from the query, but I don't understand why. Without the second #media then it works like an or operator and the desktop styling will show up on an iPad.
I have tried nesting media queries, which doesn't seem to work, and I have tried using not, but the first line will still be true and thus it work work either.
I haven't found any information about using #media twice in a statement and having it somehow exclude the second media query, could someone explain the correct way to do this, or at least explain why this works?
Brilliant - yet incorrect syntax according to VS12.
Can be seen working here http://www.stilborg.com on iPad.
I have my site optimized for OS and iOS, but testing it for Android through browserstack.com has left me puzzled about targeting Android devices in my media queries.
Here is my query that works for iOS devices:
#using em based query after reading this article: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
#media only screen and (device-width: 20em)
I have tried a variety of different queries (including px based queries), but just want one that will work for all / most handheld android devices. Have you had any luck with this? Thanks for your ideas.
Media queries can't be used to find device type, you should use user agent sniffing for this.
There is a good resource for media queries on CSS-Tricks though.
Please have look into the demo at http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
It seems like device-width: 20em would cause some problems. So have look here.
Assuming your 1em = 16px I would use the below media query
#media only screen and (min-device-width: 20em) and (max-device-width: 30em)
That would look for any screen device whose width is between 320px and 480px, which is a fairly good standard for mobile devices.
if you want to target Android using media queries, I think you can fake it by querying dpi.
#media screen and (min-resolution: 192dpi) { … }
What is the difference between these two instructions?
#media screen and (max-device-width: 480px) {}
and
#media only screen and (max-device-width: 480px) {}
The keyword ‘only’ can also be used to hide style sheets from older
user agents. User agents must process media queries starting with
‘only’ as if the ‘only’ keyword was not present.
From http://www.w3.org/TR/css3-mediaqueries/
In real use scenarios, the only screen query is used to target specific mobile browsers that support modern CSS.
From http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Even more clearly
Prefixing a media queries with the "only" keyword will cause non
CSS3-compliant browsers to ignore the rule.
From http://www.html5rocks.com/en/mobile/mobifying.html
Per Apple's developer instructions, I am using the following CSS to affect only iPads and iPhones. However, the CSS seems to be affecting older browsers as well (e.g., Firefox 3.5). Any suggestions on how to target only the iPad/iPhone or only target Firefox 3.5, but not both?
#media screen and (max-device-width: 1024px) {
{...}
}
The Media Queries are based on screen size (among other things). To target the iphone you need to change your query to something like:
#media screen and (max-device-width: 480px) {
{...}
}
This will only target devices with a max display resolution of 480px
You can read more here: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
And I would definitely check out the new Responsive design book from A Book Apart - really really good