Bootstrap and IE compatibility mode relationship explanation

IE compatibility mode
Bootstrap does not support the old compatibility mode of IE. In order for IE browser to run the latest rendering mode, it is recommended to add this <meta> tag to your page:
Copy

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

Press the F12 key to open IE debugging tool, you can see the current mode of IE rendering is what.

This meta tag is included in all Bootstrap document and instance pages for the best drawing effect in each supported version of IE.

Please refer to this question posted on StackOverflow.
Domestic browser high-speed mode

Domestic browser vendors generally support compatibility mode (ie kernel) and high-speed mode (that is, the WebKit kernel), unfortunately, all domestic browsers are the default compatibility mode, which caused by the low version of IE (IE8 and below) The kernel allows Bootstrap based The site that was built shows a very bad situation. Fortunately, the domestic browser manufacturers are gradually aware of this, some manufacturers have begun to make a difference!

Add the following <meta> tags to the page, you can make some of the domestic browser by default in high-speed mode rendering page:
Copy

<meta name= "renderer" content= "WebKit" >

Currently only 360 browsers support this <meta> tag. Hope that more domestic browser to take action as soon as possible into the high-speed ERA!
Internet Explorer 10 and Windows Phone 8 in Windows 8

Internet Explorer 10 does not differentiate between the width of the screen and the width of the viewport (viewport), which causes the media queries in the Bootstrap not to work well. To solve this problem, you can introduce the CSS code listed below to temporarily fix this problem:
Copy

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

However, this does not work on devices prior to the Windows Phone 8 Update 3 (a.k.a. GDR3) version, because doing so will cause the Windows Phone 8 device to render the page as a desktop browser instead of a narrower "phone" rendering, in order to resolve This problem, you also need to add the following CSS and JavaScript code to resolve this problem.
Copy

@-webkit-viewport {width:device-width;}
@-moz-viewport {width:device-width;}
@-ms-viewport {width:device-width;}
@-o-viewport {width:device-width;}
@viewport {width:device-width;}

Copy

if (Navigator.userAgent.match (/iemobile\/10\.0/)) {
var msviewportstyle = document.createelement (' style ')
Msviewportstyle.appendchild (
document.createTextNode (
' @-ms-viewport{width:auto!important} '
)
)
Document.queryselector (' head '). AppendChild (Msviewportstyle)
}

Check out Windows Phone 8 and Device-width for more information.

As a reminder, we've added the above code to all Bootstrap document and instance pages.

Bootstrap and IE compatibility mode relationship explanation