3

I'm working on a new website using em-based CSS media queries. In the past, I've always used px-based media queries. I wanted to try something new. I have things set up in such a fashion that most phones (in portrait), most phones (in landscape) and tablets (in portrait), and most tablets (in landscape) will see differences in the layout.

Everything works, as expected, on desktop browsers (IE, Firefox, Chrome), Android (Android browser, Chrome), and Windows Phone (IE). iOS (Safari) displays the portrait version, as expected, but switching to landscape keeps the portrait layout. This has been tested on an iPhone 5 (iOS7), iPad 2 (iOS7), and iPhone 4s (iOS6) and they are all consistently inconsistent.

HTML:

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

CSS:

/* portrait phone (< 480px) */
@media screen and (max-width:29.9999em) {
}

/* landscape phone and portrait tablet (>= 480px < 960px) */
@media screen and (min-width:30em) and (max-width:59.9999em) {
}

/* landscape tablet and normal monitor (>= 960px < 1440px) */
@media screen and (min-width:60em) and (max-width:89.9999em) {
}

/* bigger monitor (>= 1440px) */
@media screen and (min-width:90em) {
}

/* big monitor (>= 1920px) */
@media screen and (min-width:120em) {
}

So, the iPhone (landscape) should fall between (min-width:30em) and (max-width:59.9999em) and the iPad (landscape) should fall between (min-width:60em) and (max-width:89.9999em). Unfortunately, they both fall one query narrower.

While searching through stackoverflow, I found this post that says the default font size in mobile Safari is 12px (not 16px, as normal). I had not seen that on any other sites, but the calculations seemed to make sense (further calculating doesn't seem to put them in different media query groups, though).

In response, to that post, I set a base font-size of 16px.

CSS:

html { font-size:16px; }

My thought was that it would over-ride the browser's default setting and match with every other browser that was being tested. Unfortunately, mobile Safari is still using the portrait layout when in landscape.

I had read a few pages that mentioned needing to refresh with Safari (not sure if it was mobile or desktop), so I even tried that.

Does anyone have a reason why this is happening? As mentioned, I've created other sites using px-based media queries and they function as expected.

Community
  • 1
  • 1
doubleJ
  • 1,190
  • 1
  • 16
  • 29

2 Answers2

3

In media queries, the em is based on the browser's default font-size (note that the user can modify this). There's nothing you can do to alter this.

Related:

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Hmmm...I was under the impression that `html { font-size:16px; }` altered the browser's default font-size. Is that not correct? Would `!important` over-ride it? – doubleJ Oct 24 '13 at 15:49
3

This was the fix that ended up working...

CSS:

body {
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}
doubleJ
  • 1,190
  • 1
  • 16
  • 29