Bootstrap 手机屏幕自适应的响应式布局开关

发布时间:2018-06-20 14:33:20编辑:丝画阁阅读(1037)



  1. <head>  
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

如果移动设备浏览器里,屏幕太大的话,缩放影响效果,可以禁用缩放。就是再加上 user-scalable=no这个标签。
  1. <head>  
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  


  1. Omit the viewport <meta> mentioned in the CSS docs
  2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  3. If using navbars, remove all navbar collapsing and expanding behavior.
  4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.