Menu
Considering that SingularityGS follows, by default, a mobile-first approach, how do you guys solve the problem in IE8, which shows the mobile version of everything that depends on media-queries?
Have you found a solution for this or do I have to switch to desktop-first?
Thanks.
286
Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries!
I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go!
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
You might also want to enable CSS3 selectors in IE 7 and 8 so that stuff like .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } would work.
You'll need the Selectivizr polyfill. For Respond to work together with Selectivizr, Selectivizr should be of version 1.0.3b or later (which hasn't yet been releazed as stable for two years for some reason) and should be loaded before Respond. Selectivizr also requires NWMatcher or alternative to be loaded before it. So the correct order is this:
<!--[if lt IE 9]>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
And you totally should also have the html5shiv polyfill (aka html5shim) to make IE 7-8 support the most basic CSS3 stuff.
So my ultimate set of IE 7-8 polyfills looks like this:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Note: don't use IE9.js in combination with those as it will make IE 8 freeze.
77
I use Breakpoint's built in No Query Fallback support in combination with either IE classes on my HTML tag or Modernizr tests for Media Query support.
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks
33
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
