CODEWITHSUNDEEP
css
Navin Rauniyar
Navin Rauniyar

Reputation: 10545

css only for desktop or laptops but not for ipad browsers

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;
  }
}

Upvotes: 4

Views: 3467

Answers (7)

wayzz
wayzz

Reputation: 627

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.

Upvotes: 0

Sam Beckham
Sam Beckham

Reputation: 1218

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.

Upvotes: 1

tweedman23
tweedman23

Reputation: 319

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/

Upvotes: 3

Navin Rauniyar
Navin Rauniyar

Reputation: 10545

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.

Upvotes: -1

Karthik N
Karthik N

Reputation: 535

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

Upvotes: 0

himanshu
himanshu

Reputation: 1797

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

Upvotes: 0

davidcondrey
davidcondrey

Reputation: 36043

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) { }

Upvotes: 0

Related Questions