2

@media query is not working in case of iPhone 5 and iPad 4 OS. I have used following CSS for styling each OS and device for different screen.

I explicitly checked that my iPad and iPhone width and height and based on that only i have kept the media queries. This works fine on ANDROID OS.

/*@media print {*/
/* iPhone 5 (Portrait) */
@media screen and (max-device-height: 568px) and (orientation: portrait) {
     #map_canvas {
        border: 1px dashed #C0C0C0; 
        width: 290px;
        height: 473px;
      }
}

/* iPad 4 (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 735px;
    height: 929px;
  }
}

/* iPad 4 (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
  #map_canvas {
    border: 1px dashed #C0C0C0;
    width: 990px;
    height: 673px;
  }
}

/* Samsung 10.1 inch (Portrait) */
@media screen and (max-device-height: 1280px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 790px;
    height: 1140px;
  }
}

/* Samsung 10.1 inch (Landscape) */
@media screen and (max-device-width: 1280px) and (orientation: landscape) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 1230px;
    height: 680px;
  }
}

/* Samsung 7.0 inch (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 570px;
    height: 875px;
  }
}

/* Samsung 7.0 inch (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
  #map_canvas {
    border: 1px dashed #C0C0C0;
    width: 990px;
    height: 455px;
  }
}

@media all and (orientation: landscape) {
  html, body {
    height: auto;
  }
}

Each time i tested with various changes in above code, I am getting the LAST CSS being referred for applying the style.

I found one link, (which i have not yet tried but going to try soon as mac is available) but have question about that too (iphone/ipad media query issues). Can anyone explain the reason behind that Is pixel ratio matters in this case??

Community
  • 1
  • 1
DShah
  • 9,768
  • 11
  • 71
  • 127

2 Answers2

4

Excerpted from https://mislav.net/2010/04/targeted-css/

You should be aware that orientation media query, although supported on the iPad, doesn’t work on the iPhone (tested with v3.1.3). Fortunately, size queries like width and device-width work, so layout-switching is possible without JavaScript with some combination of those.

Dave Powers
  • 2,051
  • 2
  • 30
  • 34
henryaaron
  • 6,042
  • 20
  • 61
  • 80
3

The reason is because the new Apple devices have a higher pixel ratio density. You should put this meta tag in the head of your document and your media queries will work everywhere:

<meta name="viewport" content="width=device-width">

By the way, the higher pixel ratio for the new apple products is called "retina display."

If you do have access the iPhone, ipad, etc... try viewing this website:

http://mattstow.com/viewport-size.html

on those devices to see the viewport size of the device. Then, add the meta tag, and you will see that the viewport size changes.

Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
  • Okey, so does this mean that `viewport` is the actual area used by our application?? Above code says that i am setting my width of my app to device width?? right?? Does it has to do something with iOS devices?? – DShah Feb 12 '13 at 10:27
  • Yes. It has to do with all devices. – Raphael Rafatpanah Feb 12 '13 at 10:43
  • @RaphaelRafatpanah my site is rendering in 1104px width on iPhone i added meta tag and minimum and maximum device width in css here is the [link of my site](https://www.kalvie.com) . If possible please help me out i'm not able to post question on stack overflow due to some restrictions. – Abhay Singh Jan 12 '17 at 10:08
  • Please create a "mock" site on, for example, jsFiddle with only the mimimum code that reproduces the problem and post a new question. That's what I would so at least. – Raphael Rafatpanah Jan 12 '17 at 10:54