CODEWITHSUNDEEP
htmlcssipadresponsive-designmedia-queries
Sai
Sai

Reputation: 59

How to set different media-queries for laptop 1024px and ipad 1024px width?

I want to set different media queries for 1024px width screens depending on whether it's a laptop screen or iPad screen.

For example if someone view my site in laptop(width : 1024px) they should see an image and if they view it from iPad(width : 1024px ) the image should be hidden(display:none).

Upvotes: 3

Views: 26700

Answers (3)

Ammar Alyousfi
Ammar Alyousfi

Reputation: 4372

You probably mean iPad Pro whose width is 1024px.

You can detect whether the device is an iPad or a laptop using media queries by checking for the device height: iPad Pro height is 1366px which, I think, is higher than the height of any laptop, so the CSS would look like this:

@media screen and (min-width: 1024px) and (min-height: 1320px) {
    /* iPad Pro */
}

@media screen and (min-width: 1024px) and (max-height: 1310px) {
    /* Laptop */
}

Upvotes: 5

Rahul
Rahul

Reputation: 4364

for ipad specific media queries use below code,

if u want to hide img in ipad at 1024px width i.e. landscape mode u can use class "hide-me-landscape"

if u want to hide img in ipad with landscape and portrait mode use class "hide-me"

if u want to hide img in portrait mode use class "hide-me-portrait"

see below code for ex

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me{
        display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me-portrait{
        display: none;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me-landscape{
        display: none;
    }
}

you can learn more about it here

you can also use modernizr to detect whether user is using touch screen device or not and apply your css accordingly

hope it helps :)

Upvotes: 0

user3722860
user3722860

Reputation: 189

If the width of the screens are the same size, CSS can't distinguish them from each other I guess.

You can use JavaScript. The platform property, from the navigator object, returns a string with the platform the browser is used on. (i.e. MacIntel, Win32) (Usage: platform.navigator)

For disabling and enabling stylesheet this might work for you: http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/

Upvotes: 0

Related Questions