Menu
I am finding that IE9 is taking on 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's width is 1024px.
Having done some research, I found the following question/solution and it offers an explanation as to why this is happening.
Media query not working in IE9
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
I also found this question: Common breakpoints for media queries on a responsive site but it doesn't give me a solution.
How can I apply my stylesheet only to tablets and not to desktop browsers like IE9 at a 1024px width?
641
You need to add this meta tag in the <head> of 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.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
