【问题标题】:Bootstrap 3 - media queries Tablet BreakpointsBootstrap 3 - 媒体查询 Tablet Breakpoints
【发布时间】:2015-01-15 13:36:18
【问题描述】:

我使用 Bootstrap 3 和媒体查询创建了一个网站。 这是我使用移动优先方法的基本 .css 媒体查询设置。

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

此外,我在 index.html 中有这个用于移动视口优化的元集: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

在调整我的浏览器 chrome 和 firefox 的大小时,所有断点都按预期工作。 对于移动设备,无论是纵向还是横向,都会显示移动版本。 但是在三星 Galaxy Tab 和 Ipad 上测试网站时,我只得到了完整的网站。

会不会是我为平板电脑使用了错误的断点?或者是其他东西?我很困惑..因为它可以在移动设备和浏览器中运行!

【问题讨论】:

    标签: twitter-bootstrap-3 media-queries breakpoints tablet


    【解决方案1】:

    -- 编辑 2--

    我对您的完整网站进行了更多挖掘。我在本地重新创建了您的站点并使用了新版本的引导 CSS,将断点更改为 767 像素。然后我将自定义 CSS 中的断点更改为 767 像素。在 iPad 上加载仍然存在问题,整个网站仍在加载中。

    经过进一步研究,我注意到您在 CDN 上为“引导库”引用的 CSS 表。问题出在这个文件上。该文件提到包括引导的媒体查询!进行上述更改并注释掉此文件后,该网站以 iPad 纵向移动形式加载。

    <!-- Bootstrap Gallery -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    

    -- 编辑 2--

    -- 编辑--

    Twitter bootstrap 旨在显示平板电脑的全屏网站。请注意,小型设备显示完整菜单,而超小型设备显示移动菜单。

    为小屏幕设置的断点是 768px - iPad 在纵向模式下的宽度 - 因此 iPad 呈现为小屏幕。要让 iPad 以纵向模式(使用移动菜单)呈现为超小型设备,请将小屏幕断点的最小宽度更改为 767 像素。

    https://github.com/twbs/bootstrap/issues/2155

    -- 结束编辑--

    我很好奇这种情况是在您正在测试的平板电脑的纵向和横向模式下发生还是仅在横向模式下发生。

    我希望这会在使用标准 Bootstrap 设置的横向模式下发生,因为 iPad 的宽度是 1024x,而 bootstrap 的中等断点是 992px。请注意,iPad 属于 Medium 类别,Medium 显示的是完整菜单,而不是移动菜单。

    如果您想更改断点,也可以通过设置自定义引导程序实例来实现。将中间断点更改为 1030 像素左右: http://getbootstrap.com/customize/#media-queries-breakpoints

    这里的问题是,如果使用小型笔记本电脑的人没有全屏显示您的网站,他们将获得您的移动菜单。

    【讨论】:

    • 实际上,对于我正在测试的平板电脑,横向和纵向都会发生这种情况......我也希望这只会发生在横向平板电脑模式下。我真的不明白为什么它根本不适用于平板电脑。那么元内容会不会有问题?
    • 如果没有看到完整的代码就很难判断。这可能是使用的引导类的问题。您的网站在手机横屏模式下的外观如何?
    • 可以找到该站点here 在手机横屏模式下,媒体查询正确应用,一切正常。
    • 我想我在平板电脑上的测试还不够。 Bootstrap 的设计目的是在 iPad 上呈现整个站点。我将用完整的解释编辑答案。
    • 感谢您为我指出这一点,我尝试将最小宽度从 768px 更改为 767px,但不幸的是没有达到预期的结果。我一直在谷歌搜索,但还没有找到任何解决方案
    猜你喜欢
    • 2015-09-22
    • 2014-05-09
    • 2013-11-04
    • 2019-04-21
    • 1970-01-01
    • 2017-01-04
    • 1970-01-01
    • 2013-08-27
    • 2013-09-18
    相关资源
    最近更新 更多