I have a media query -->@media all AND (max-width: 1024)..which works well on a Samsung tablet, but I need this to only apply on th tablet and not on the pc. If the device is a pc, it should only @media screen and (max-width: 768px).. how do I go about it?
1
votes
3 Answers
-1
votes
The short answer: you don't.
The longer answer: you're going about it the wrong way.
It's easy to fall into the trap of using screen widths to target specific devices, but that's an Alice in Wonderland rabbit hole. Why? Because the widths of mobile devices overlap with the widths of desktops.
For example, here are a list of screen widths, can you guess which ones are desktop?
1024
1366
1200
1080
Guess what? I bet you're wrong about your guesses. 1024 and up seems like a "desktop" resolution, but iPhone 5 Retina is 1136x640, and the 3rd generation iPad is 2048x1536. To make things even more complicated, many people on desktops don't keep their browsers maximized, so device width does not equate to browser width. And what happens on the Kindle, which has a higher resolution, but also increases the text size?
And more devices are coming to the market on a regular basis.
So, your best bet? Abandon the idea of targeting specific devices or device classes altogether. If you absolutely have to, use JavaScript to look for touch screens (as that's the most likely reason you need to adjust the interface specifically for a class of devices).
You can still use media queries to target widths (or better yet, in my experience, use proportional media queries), but don't expect it to necessarily work on a given device.
1
votes
you can not check for the device (pc, tablet, handheld) with media queries, only for the device width (more, i know, but op ask for device-width).
Maybe this article will help you understand more of it?
0
votes
Media query should never be device specific - you simply say 'for an output of this size do this, but for an output of a different size, do that'. Whether it's a phone, PC, tablet, kiosk, watch or anything else should be irrelevant. For this reason, media query doesn't enable you to query hardware as such.
You may want different behaviour (rather than style) based on device capability, e.g.. is this a 'touch' device? But that should be managed in JS rather than CSS.
What is the actual goal of your query? Does it matter that the CSS is applied to a PC as well as a tablet?
