跨浏览器问题响应式设计答案

【问题标题】：Crossbrowser issue responsive design跨浏览器问题响应式设计
【发布时间】：2013-06-30 01:06:34
【问题描述】：

在提问之前，我想描述一下我要解决的问题。

我有一个用 bootstrap 制作的页面

http://inants.com/kadmos/web/kad/bootres/ji/break.html

需要这样做，以便当浏览器页面调整我用于左侧菜单（屏幕截图的左侧部分）的引导左侧选项卡的大小时，变成引导折叠菜单（屏幕截图的右侧部分）

截图在这里：http://inants.com/kadmos/web/menu.png

但问题是它们应该有不同的 html 代码和引导类。这就是为什么我编写了一个 jquery 代码来添加和删除必要的标签和类。例如当浏览器全屏时，我的html代码应该如下：

<div class="tabbable tabs-left">
        <button type="button" style="display:none;" class="btn btn-navbar" data-toggle="collapse"   data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#A">My Visited Jobs</a>
            </li>
            <li>
                <a data-toggle="tab" href="#B">My Saved Jobs</a>
            </li>
            <li>
                <a data-toggle="tab" href="#C">My Searches</a>
            </li>
            <li>
                <a data-toggle="tab" href="#D">My Alets</a>
            </li>
            <li>
                <a data-toggle="tab" href="#E">My Profile</a>
            </li>
            <li>
                <a data-toggle="tab" href="#F">My Settings</a>
            </li>
        </ul>
        <div class="tab-content"></div>
</div>

而在响应式视图中，应该有如下代码：

<div class="tabbable tabs-left navbar navbar-inverse openNavbar">
    <button type="button" style="display:block;" class="btn btn-navbar" data-toggle="collapse"   data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="nav-collapse collapse">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#A">My Visited Jobs</a>
            </li>
            <li>...
            </li>
        </ul>
    </div>
    <div class="tab-content"></div>
</div>

所以我们可以看到在响应模式下，对html做了如下改动：

“navbar navbar-inverse openNavbar”引导类被添加到具有“可选项”类的 div 中
在有“tabable”类的div中，“button”有display:block；
“ul”标签被插入到具有“nav-collapse collapse”类的div中

这是响应上面提到的html代码更改的jquery代码：

<script type="text/javascript">
    $(document).ready(function() {
        $(window).resize(function() {
            if ($(window).width() <= 979) {
                $('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
                if ($('.nav').parent().hasClass('tabbable')) {
                    $('.nav').wrap('<div class="nav-collapse collapse"></div>');
                }

                $('.content > .tabbable > button').show();

            } else { 
                $('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
                if (!$('.nav').parent().hasClass('tabbable')) {
                    $('.nav').unwrap()
                }
                $('.content > .tabbable > button').hide();
            }
        });
        if ($(window).width() <= 979) {
            $('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
            if ($('.nav').parent().hasClass('tabbable')) {
                $('.nav').wrap('<div class="nav-collapse collapse"></div>');
            }
            $('.content > .tabbable > button').show();

        } else { 
            $('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
            if (!$('.nav').parent().hasClass('tabbable')) {
                 $('.nav').unwrap()
            }
            $('.content > .tabbable > button').hide();
        }
    });
</script>

虽然看起来一切正常，应该可以正常工作，但是……

当我在 Mozilla (Internet explorer 9) 中将页面大小调整为 979 像素到 963 像素之间时，页面会中断。特别是它在 bootstrap-responsive.css、bootstrap.css、style.css 文件中编写了适当的代码的 @media (max-width: 979px) {...} 条件不起作用。在我看来，问题在于 Mozilla（IE9）和 Chrome 的大小不同，尽管在萤火虫中，当大小相同时，页面在一个浏览器上显示错误，而在另一个浏览器上显示错误。当我将条件 $(window).width()

将等待您对解决此错误的建议。

提前致谢。

【问题讨论】：

我为这个没有回答的问题道歉，但您可能会发现只返回两组元素更容易，一组用于桌面（包装在具有可见桌面类的 div 中）和一种用于平板电脑和手机（使用 hidden-desktop 类包装）。虽然这种方法存在一些重复的内容，但它更容易维护。
如果我好起来了，你的意思是不用 jquery，用 html 和 css，但我使用的是引导 css，如果没有 jquery，我无法隐藏或显示它的类。我已经考虑过这个变体，我认为也许在 css3 中可能会停用这些类，但我已经研究过并没有发现任何有用的东西
卡德莫斯，伊恩是对的。 Bootstrap 内置了 show-mobile 和 hide-desktop 等类。您不会隐藏类 - 您将创建两个单独的元素，每个元素一个。不过，更好的是，您可以设计自己的菜单，根据屏幕大小按您的意愿工作。在这种情况下破解 Bootstrap 将产生次优结果。如果 jQuery 被阻止或无法加载会发生什么？整个网站都坏了，不是吗？
@KadmosBalkhchyan 如果您有“bootstrap-responsive.css”，则有 CSS 选择器可以为您执行此操作（如果您在此页面上向下滚动，则会有一个表格）twitter.github.io/bootstrap/scaffolding.html#responsive跨度>
感谢 Iain 和 Chris，这真的有用..

标签： jquery html css twitter-bootstrap responsive-design

【解决方案1】：

问题的根源在于 javascript 返回的窗口宽度并不总是与某些浏览器中 @media 查询确定的窗口宽度相同 (see the accepted answer here) 。差异通常在 20px 左右，即右侧滚动条的宽度。

正如Iain 和Chris 所指出的，引导程序utility classes 是一种选择，这是一个工作示例：http://www.bootply.com/66344

祝你好运！

【讨论】：