bootstrap响应式模板标签兼容解析

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap不支持IE古老的兼容模式。让IE浏览器运行最新的渲染模式下。

<meta name="renderer" content="webkit">
让部分国产浏览器默认采用高速模式渲染页面

<meta name="viewport" content="width=device-width, initial-scale=1">
网页的缩放比例是1,也就是禁止网页缩放

<meta name="applicable-device" content="pc,mobile">
告诉百度,这个网站适配pc和手机

为了解决windows 8中的Internet Explorer 10 和windows Phone 8对bootstrap的媒体查询不支持的问题。

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)
}
阅读 40

Comments