css only for desktop or laptops but not for ipad browsers

Question

How can I apply the css only for desktops and laptops browser excluding ipad and mobile browsers?

@media only screen and (min-width: 742px) and (max-width: 769px){
  #element{
    display: none;
  }
}

Get used to [Responsive Design](http://de.wikipedia.org/wiki/Responsive_Webdesign), use [Bootstrap](http://getbootstrap.com/). — Stefan, Sep 26 '14 at 09:39
If I'm reading your question correctly, I think you don't even need to do a min-width and max-width. You could just use @media screen and (min-width: 1024px) {...} and put all your styles in there if you only want to target laptops desktop computers. That will target anything larger than a tablet. I agree with Stefan, though. Start using responsive design. — meniltiac, Oct 20 '14 at 21:43
If it is really about showing something different on desktop and mobile devices then you shouldn't rely on `@media` queries for the simple reason that it is not maintainable in the long run (devices are evolving and so do screen sizes). The best solution in this case is to use a feature detection library (@tweedman23 gave you the best one for devices detection). However, if it is just about responsive design (adjusting css depending on screen size) then `@media` queries are perfect. — Pipo, Oct 23 '14 at 08:59

score 3 · Answer 1 · answered Oct 16 '14 at 12:40

How can you guarantee a user isn't going to view your site/webapp on a desktop device that falls into the viewport width you have stated? You can't.

If really need to be that specific, device specific as apposed to using viewport width, you can sniff the browser I guess.

Here is a quick jquery demo here using:

navigator.userAgent

http://jsfiddle.net/y3ds0xpv/ - note: you'll need to view on a mobile device to see the difference between desktop and mobile.

Ultimately, I'd recommend using this if you need to use this method:

http://detector.dmolsen.com/

score 1 · Answer 2 · edited May 23 '17 at 11:49

You could always do it like this (modified from here):

@media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    #element{ display: none; } /* your css rules for ipad portrait */
}
@media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    #element{ display: none; } /* your css rules for ipad landscape */
}

I'm sure you have a valid reason for doing this but I'd be careful. As a rule you should detect features, not devices.

Karthik N · Answer 3 · 2014-09-26T09:49:58.627

0

@media screen and (min-width:1000px){
    #element{display:none;}
}

edited Sep 26 '14 at 09:49

answered Sep 26 '14 at 09:36

Karthik N

515
2
9
22

it applies for ipad too. – Navin Rauniyar Sep 26 '14 at 09:37
I need to apply css between 742px and 769px – Navin Rauniyar Sep 26 '14 at 09:52

score 0 · Answer 4 · answered Sep 26 '14 at 09:38

0

A media query to target iPads (portrait and landscape) would be:

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

so to avoid targeting iPads you can just reverse that and get everything larger and everything smaller..

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

answered Sep 26 '14 at 09:38

davidcondrey

34,416
17
114
136

Thanks for your answer, bu it didn' work. It's applying to ipad too. – Navin Rauniyar Sep 26 '14 at 09:39
If you just want to do a display:none style.. why not just do display:none in your general style and target the ipad and apply display:block or whatever your visible display style is. – davidcondrey Sep 26 '14 at 09:43
I want to make sure of my code that would work in between 742px and 769px only excluding ipad. – Navin Rauniyar Sep 26 '14 at 09:46

score 0 · Answer 5 · answered Sep 26 '14 at 09:39

0

@media only screen and (max-width: 769px){
  #element{
    display: none;
  }
}

answered Sep 26 '14 at 09:39

himanshu

1,732
1
11
12

score 0 · Answer 6 · answered Oct 23 '14 at 10:02

Using Foundation framework you will have options for all screen sizes be it desktops, tablets or phones. Using their 'large', 'medium' and 'small' functions. It is fairly easy to use.

With Foundation your problem would be fixed by just adding hide-for-small and hide-for-medium classes to the div being displayed only on desktop.

score -1 · Accepted Answer · answered Sep 26 '14 at 09:57

-1

Finally, I got working media query only for desktops or laptops browser:

@media only screen and (min-width: 742px) and (max-width: 769px), 
not all and (min-width: 742px) and (max-width: 769px) (orientation: portrait){
   #element{
     display: none;
  }
}

Glad to say, it is working nice.

answered Sep 26 '14 at 09:57

Navin Rauniyar

10,127
14
45
68

1

How did you come up with those numbers 742, 769? I still think you should consider reversing the logic, it would be far simpler. – davidcondrey Sep 28 '14 at 11:01
1

Hi, if this answer of yours has solved your question, please accept it and *don't* put "[solved]" in the title; it's just noise.There is a 2 day wait until you can mark it as self-accepted, so I imagine that is why you haven't already checked it :) – misterManSam Oct 16 '14 at 12:12
1

My desktop has width of way more than 769px. Something's not right about this. – slebetman Oct 17 '14 at 07:48
This solution doesn't look like a true solution. – Mia Oct 17 '14 at 22:50
@slebetman the rule is not about more than 769px but if max-width 769px. So, check this between 742px and 769px to realize the fact. – Navin Rauniyar Oct 20 '14 at 11:25

css only for desktop or laptops but not for ipad browsers

7 Answers7