使引导程序无响应不使用 col-xs答案

【问题标题】：Make bootstrap non-responsive Not using col-xs使引导程序无响应不使用 col-xs
【发布时间】：2014-10-06 11:37:48
【问题描述】：

我想让网站无响应，但使用 col-md、col-lg 和 col-sm，它必须无响应并忽略 @viewport ( browser resize ) width ，但必须在移动设备上响应和平板电脑。

我需要使用 col-md 、 sm 、 lg 使其在移动设备和平板电脑上响应，但我的网站崩溃取决于浏览器 @viewport 因为我不能对所有列使用 col-xs。

有可能解决吗？

谢谢

【问题讨论】：

什么意思？您希望您的网站响应还是完全不响应？
台式机无响应，移动设备和平板电脑有响应。我已经写了，对不起我的英语
我认为您错过了响应式设计的意义.....您为什么关心客户端使用的是移动设备还是台式机？重要的是它会根据他们的窗口大小适当显示。
其实是客户要求的
如果您有答案，请接受...谢谢

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

做这样的事情，

<script type="text/javascript">
$( document ).ready(function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
         $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
    }
});

</script>

您必须加载 jQuery。在 head 标签中。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

【讨论】：

谢谢，但这不是关于样式表，而是关于 col-xs 和 col-md，因为当用户调整浏览器大小时 col-md 会折叠（灵活）。

【解决方案2】：

试试这个：-

@media screen and (min-width:768px){ /* or whatever width you prefer for min-width of desktop view */
.container{
    min-width:970px; /* or whatever width you prefer for desktop view */
    width:970px; /* or whatever width you prefer for desktop view */
    }
}

它应该做的是，它不会调整容器的大小，直到屏幕宽度为 768 像素。您可以根据需要更改此媒体屏幕最小宽度。一旦设备或浏览器的缩小超过 768 像素，它将自动启动响应。上面的 CSS 只是一个例子。您不需要任何 JavaScript 来处理您的情况。

希望对您有所帮助。

【讨论】：

由于有许多平板电脑与桌面设备一样宽，因此该解决方案将在纵向 ipad 上发挥作用，使其对于横向来说太宽了。

【解决方案3】：

我会根据它是否是触摸设备来加载或不加载响应式样式。移动设备的样式应该只是具有响应式 css 的网站。然后将其副本用于非触摸设备，但将列从最小宽度中取出并在容器上设置宽度。还有其他方法可以做到这一点，比如加载另一个 css 文件，如果它是触摸的，并且只保留所有设备的桌面样式，但是用于响应的 css 是在桌面之后加载的，因此它是顺序中的最后一个。

迷你演示：http://jsbin.com/wuqita/1/edit

/* __________________ SUPPORTS TOUCH OR NOT  __________________*/
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        };
    } else {
        d.className += " no-touch";
        return {
            touch: false
        };
    }
})();


$(document).ready(function () {
    if ($('html').hasClass('touch')) { 
      $('#desktopcss').prop('disabled',true);
    }
      if ($('html').hasClass('no-touch')) { 
      $('#responsivecss').prop('disabled',true);
    }

});

CSS 文件链接和 ID：

<link id="responsivecss" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link id="desktopcss" href="//bombdiggitydesign.com/jsbin/test.css" rel="stylesheet" type="text/css" />

【讨论】：