internet explorer - Mobile-First Responsive Design IE 8 Widescreen Compatibility -

here link page i'm working on.

i've switched on bootstrap 3's mobile-first framework. main difference instead of defaulting wide layout , using media queries shrink down mobile sizes, default size mobile , media queries used wider resolutions:

so instead of:

@media (max-width: 767px) {} 

we use:

@media (min-width: 768px) {} 

when using old way, ie 8 (which doesn't support media queries) display page in widest format. displays page in mobile format, not desirable.

is there way page default widest layout when media queries not supported? include respond.js have had no luck:

    <!-- html5 shim , respond.js ie8 support of html5 elements , media queries -->     <!--[if lt ie 9]>         <script src="js/html5shiv.js"></script>         <script src="js/respond.min.js"></script>     <![endif]--> 

a fix gets long way: add stylesheet ltie9

<!--[if lt ie 9]>     <link href="styles/css/ltie9.css" rel="stylesheet" type="text/css"> <![endif]--> 

copy , paste styling cols, push , offset media query of choosing (you find in grid.less) ltie9.less. i.ex. medium size:

its has less, need include variables.less well. or can replace widths width percentage of choosing, why you?

// core variables @import "variables.less";  body {   .container {     max-width: @container-desktop;   }   .col-md-1,   .col-md-2,   .col-md-3,   .col-md-4,   .col-md-5,   .col-md-6,   .col-md-7,   .col-md-8,   .col-md-9,   .col-md-10,   .col-md-11 {     float: left;   }   .col-md-1  { width: percentage((1 / @grid-columns)); }   .col-md-2  { width: percentage((2 / @grid-columns)); }   .col-md-3  { width: percentage((3 / @grid-columns)); }   .col-md-4  { width: percentage((4 / @grid-columns)); }   .col-md-5  { width: percentage((5 / @grid-columns)); }   .col-md-6  { width: percentage((6 / @grid-columns)); }   .col-md-7  { width: percentage((7 / @grid-columns)); }   .col-md-8  { width: percentage((8 / @grid-columns)); }   .col-md-9  { width: percentage((9 / @grid-columns)); }   .col-md-10 { width: percentage((10/ @grid-columns)); }   .col-md-11 { width: percentage((11/ @grid-columns)); }   .col-md-12 { width: 100%; }    // push , pull columns source order changes   .col-md-push-0  { left: auto; }   .col-md-push-1  { left: percentage((1 / @grid-columns)); }   .col-md-push-2  { left: percentage((2 / @grid-columns)); }   .col-md-push-3  { left: percentage((3 / @grid-columns)); }   .col-md-push-4  { left: percentage((4 / @grid-columns)); }   .col-md-push-5  { left: percentage((5 / @grid-columns)); }   .col-md-push-6  { left: percentage((6 / @grid-columns)); }   .col-md-push-7  { left: percentage((7 / @grid-columns)); }   .col-md-push-8  { left: percentage((8 / @grid-columns)); }   .col-md-push-9  { left: percentage((9 / @grid-columns)); }   .col-md-push-10 { left: percentage((10/ @grid-columns)); }   .col-md-push-11 { left: percentage((11/ @grid-columns)); }    .col-md-pull-0  { right: auto; }   .col-md-pull-1  { right: percentage((1 / @grid-columns)); }   .col-md-pull-2  { right: percentage((2 / @grid-columns)); }   .col-md-pull-3  { right: percentage((3 / @grid-columns)); }   .col-md-pull-4  { right: percentage((4 / @grid-columns)); }   .col-md-pull-5  { right: percentage((5 / @grid-columns)); }   .col-md-pull-6  { right: percentage((6 / @grid-columns)); }   .col-md-pull-7  { right: percentage((7 / @grid-columns)); }   .col-md-pull-8  { right: percentage((8 / @grid-columns)); }   .col-md-pull-9  { right: percentage((9 / @grid-columns)); }   .col-md-pull-10 { right: percentage((10/ @grid-columns)); }   .col-md-pull-11 { right: percentage((11/ @grid-columns)); }    // offsets   .col-md-offset-0  { margin-left: 0; }   .col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }   .col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }   .col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }   .col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }   .col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }   .col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }   .col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }   .col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }   .col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }   .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }   .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); } }