Bootstrap 手機螢幕自適應的響應式佈局開關
阿新 • • 發佈：2019-01-02
Bootstrap提供了一套響應式佈局的解決方案。但是有時候我們需要自己控制是否需要這個響應式佈局。
在3.x的bootstrap裡面，如果想要開啟，需要新增下面的東西：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">如果移動裝置瀏覽器裡，螢幕太大的話，縮放影響效果，可以禁用縮放。就是再加上 user-scalable=no這個標籤。
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
如果你想關閉它，官網是這麼寫的。
- Omit the viewport
<meta>mentioned in the CSS docs - Override the
widthon the.containerfor each grid tier with a single width, for examplewidth: 970px !important;Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the!importantwith media queries or some selector-fu. - If using navbars, remove all navbar collapsing and expanding behavior.
- 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.