search

salcode / bootstrap-genesis

WordPress Genesis Child Theme setup to use Bootstrap, Sass, and Grunt
MIT License
184 stars 63 forks source link

Add X-UA-Compatible and viewport #96

Closed bryanwillis closed 9 years ago

bryanwillis commented 9 years ago

Add X-UA-Compatible and viewport here to comply with bootstraps changes: https://github.com/twbs/bootstrap/issues/15601

This would also allow removal of two additional files: ie-conditional-comments.php responsive-viewport.php

Basically unless these meta tags immediately follow the head tag (specifically x-ua-compatible), the site will break in IE-8 when compatibility mode is on. I just realized this was added to core bootstrap a few months ago. I originally came across this last year with a friend who was using Squarespace and IE-8 (which didn't have support for this at the time). This article is old but does a good job of explaining, if you're interested (http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/) Anyway, I think this is pretty important to add. Thoughts?

salcode commented 9 years ago

@bryanwillis Thanks for clarifying, I believe understand now. If I understand correctly,

On IE8, even though the theme has <meta http-equiv="X-UA-Compatible" content="IE=edge"> the Compatibility View button is still displayed. By changing where this meta tag appears, we can remove the Compatibility View button.

As an example, http://getbootstrap.com/ does not display the Compatibility View button.

salcode commented 9 years ago

@bryanwillis When I apply this PR, I still see the Compatibility View button.

Comparing the http://getbootstrap.com/ source code to the theme's rendered source code, I made a guess and removed the conditional comments at the beginning of the source code.

Changing this

<!--[if lt IE 7 ]> <html class="ie ie6 no-js" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" dir="ltr" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-US"><!--<![endif]-->

to

<html class="no-js" dir="ltr" lang="en-US">

which did remove the Compatibility View button.

I think the conditional comments are more valuable then removing the Compatibility View button on IE8 so I don't think it makes sense to make this change.

Overall, thank you for bringing this up as I was not familiar with this behavior and while I try to stay as far away from IE8 as possible, it is always good to know your enemy :wink:

If you're getting a different behavior or you've figured out a way to remove the Compatibility View button without sacrificing anything else, I'm certain open to further revisions.

Thanks.