Geek Answers Handbook

How to set up a scoreboard but not IE9 using a media query

I find that IE9 uses tablet styles for my site.

@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* tablet styles */ }

The above media query is applied in IE9 when the browser width is 1024px.

After doing some research, I found the following question / solution, and it offers an explanation of why this is happening.

Media request not working in IE9

From what I can say, it comes down to IE9, which does not interpret "min-device-width" and "max-device-width".

According to http://msdn.microsoft.com/library/ms530813.aspx , it does not support these properties, only "min-width" and "max-width".

In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser should ignore properties that it does not recognize. Not so with IE9 it seems.

I also found this question: General breakpoints for multimedia queries on a responsive site , but this does not give me a solution.

How do I apply a style sheet only to tablets, not desktop browsers like IE9 with a width of 1024 pixels?

+8
css html5 css3 responsive-design media-queries
source share
1 answer

You need to add this meta tag to the <head> your document:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

And then in your css you can replace:

  • min-device-width with min-width
  • max-device-width with max-width .
+2
source share

More articles:


All Articles