CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Kango
Kango

Reputation: 847

Media query does not work for Ipad

I am new with using media queries. I am working on a website which I want it to be correctly displayed on Ipad.

I have tried this,

//css use for Ipad

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


// css use for Window
    .overlayBox{
         width:450px;
  }

But i am having problem that media queries doesn't work for Ipad. It takes window css. Am I doing something wrong?

Upvotes: 1

Views: 1847

Answers (1)

Jared
Jared

Reputation: 3016

Use device-width and device-height to target specific devices, then use orientation to target portrait or landscape.

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    .myrules { 
        width: 200px;
    }
}

Upvotes: 1

Related Questions