IE10 vs. Media Queries

June 10, 2013 - By

I just had my first run-in with IE10.

Consider this media query:

@media (max-width:767) {}

Chrome creates a break point at 767px.
IE creates a break point at 750px – and be sure that in the interim the layout explodes like Michael Bay is directing the website.

The reason for this is that MS isn’t too interested in Apple’s invention of the meta viewport tag. The fix is simple:

@-ms-viewport {
width: device-width;
}

More info: http://css-tricks.com/snippets/javascript/fix-ie-10-on-windows-phone-8-viewport/

Categorized in:

This post was written by ArleyM