-1

I have some styles that need to be only applied on standard computer screens with the resolution 1280px+ (and not on tablets with the same screen width).

@media screen and (min-width:1280px) and (-webkit-device-pixel-ratio: 1) {

//something

}

But not all browsers support -webkit-device-pixel-ratio, so on those these styles don't get applied at all.

Is it possible to make such browsers ignore -webkit-device-pixel-ratio and go only with min-width condition? Without JavaScript.

P.S. the answer "no, it's not possible", backed by official information, will also be accepted.

COOLak
  • 379
  • 3
  • 15
  • As far as I am aware, what you're trying to achieve is impossible with pure CSS. You'll likely need JavaScript to look at the type of device in play. – Obsidian Age Mar 26 '19 at 20:01
  • You might have to do two conditionals. Basically just `(min-width: 1280px)` and then follow it using the the query you have to target handheld devices to override the previous settings. – disinfor Mar 26 '19 at 20:08
  • 1
    Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – jarrodwhitley Mar 26 '19 at 21:10
  • @JarrodW. please pay more attention. The question has nothing to do with that. – COOLak Mar 26 '19 at 21:15
  • @COOLak No need to be rude, friend. It says "possible duplicate". Since what I'm about to tell you is addressed in that post. You will have to learn some JS to pull this off. I have some specialized JS that targets mobile devices only with `if ((/Mobi|Android/i.test(navigator.userAgent)) && ($(window).width() <= 414))`. You may also want to look into using `matchMedia()` https://stackoverflow.com/questions/11364986/jquery-media-queries-with-match-media – jarrodwhitley Mar 26 '19 at 21:32
  • @JarrodW. sorry, I don't understand what is rude in asking a person to pay attention, especially using the word "please". Thanks, but I wasn't looking for a JS way. If it's not possible, ok, the only thing affected by that is that my IE desktop users will have to click on search instead of hovering over it. Not a big deal. – COOLak Mar 26 '19 at 23:04
  • No one likes IE desktop users anyway ;) – jarrodwhitley Mar 27 '19 at 14:43

1 Answers1

0

Separate multiple selectors with a comma, you can do this with media queries too:

@media screen and (min-width:1280px) and (-webkit-device-pixel-ratio: 1),
screen and (min-width:1280px) {
  //something
}
BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16
  • This answer just applies all styles within this condition on ALL devices with `min-width:1280px`. Even on those where `-webkit-device-pixel-ratio` is not 1. Even when the browser supports this parameter. – COOLak Mar 26 '19 at 22:37