CODEWITHSUNDEEP
javascriptmobilewindows-mobile
Michael Bransky
Michael Bransky

Reputation: 33

Media queries don't work for mobile IE

I've defined the following media queries in order to load different .css files for mobile and desktop browsers:

<link rel="stylesheet" type="text/css" media="screen" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

But in mobile Internet Explorer I see styles from desktop.css for some reason. Why it is so? How can I fix it?

Upvotes: 2

Views: 1786

Answers (3)

Apps Tawale
Apps Tawale

Reputation: 675

Use css for windows lumia 535

@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) { }

Use css for windows lumia 520

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) { // your code goes here }

Upvotes: 0

gilly3
gilly3

Reputation: 91527

It is being applied because a handheld is also a screen. Try hiding the desktop version by using a media query such as this:

media="screen and (min-device-width:500px)"

IE does not recognize media="handheld": http://msdn.microsoft.com/en-us/library/ms530813(VS.85).aspx I take that back. Mobile IE does recognize that: http://msdn.microsoft.com/en-us/library/bb415462.aspx

Upvotes: 1

Pavel Podlipensky
Pavel Podlipensky

Reputation: 8269

Usage of handheld is not reliable in mobile browsers, some mobile browsers (such as Mobile Internet Explorer) use media="handheld" if it is the only value defined, but use media="screen" by default if both are defined. The hack is to define media="Screen", with an uppercase S, this causes Mobile IE to use the handheld option when both are defined. But I'd suggest you to avoid using these media queries as you should rely on screen resolution rather than on mobile browser. For example, Mobile Safari could be on both iPad or iPhones, but you need to style your webiste differently because of different size of the screen. So you can use the following media queries for iPhones:

<link rel="stylesheet" media="only screen and (min-device-width: 480px)" href="iphone.css" />

For iPad

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="ipad.css" />

For desktop

<link rel="stylesheet" media="screen and (min-width: 960px)" href="desktop.css" />

Or you can specify media queries directly in .css file

@media screen and (min-width: 960px) {
  .class {
    background: #ccc;
  }
}

Here are some good articles about it:

http://webdesignerwall.com/tutorials/css3-media-queries

http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Upvotes: 3

Related Questions