Bootstrap Media Queries on IE 10 Windows 8 and Windows Phone 8

[salcode]

This Bootstrap issue is discussed at http://getbootstrap.com/getting-started/#support-ie10-width

I'm hesitant to add this fix since Bootstrap has chosen not to include it in their core.

This might make a good small plugin.

Alternatively, if I'm reading this correctly, adding

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

fixes IE 10 on Windows 8 (but not Windows Phone 8). Adding this might be a good compromise and then going the plugin route for Windows Phone 8 (with both CSS and JS).

I'm currently downloading an IE10 on Windows 8 virtual machine so I can experience this for myself.

Thanks to @bryanwillis for bringing this up.

See PR #144

[salcode]

I loaded my site http://salferrarello.com/ in a Virtual machine with IE 10 on Windows 8.

I'm definitely seeing some responsive behavior (between the two largest breakpoints at least). I couldn't check at mobile screen size because IE wouldn't run below a certain screen resolution.

http://screencast.com/t/2dPpgWk9x

Note: There is an issue with the rounded corners on my Gravatar but that is my own add-on CSS (which I need to look into), not the Bootstrap Genesis CSS.

[bryanwillis]

in regard to the rounded corner issue, border-radius is not supported in ie8 unfortunately

I tested the viewport issue out in IE10 on windows 8 and windows phone 8 and was able to figure out the issue (not explained very well on Bootstrap's site).

So basically IE10 has two modes for windows 8, "classic" and "metro". Most smaller devices (phones, tablets, laptops, etc) ship with metro which allows you to snap windows to the side.

So devices in metro mode the media queries don't work properly. Classic mode they do.

Anyway, I added how to use respond.js in the wiki so if you decide not to add this to the theme we can add this there.

[salcode]

For the general IE 10 questions, I prefer the idea of keeping this out of the theme and keeping the theme matching Bootstrap. I like the wiki entry (thanks @bryanwillis ).

Unrelated to this issue (or Bootstrap Genesis)

Ok, I've resolved the border-radius issue in the Gravatar on my site, which was using additional non-Bootstrap Genesis code. FYI, IE 10 didn't like the border radius being set without a border so I added

border: 1px solid #fff;

and it resolved that issue.