Question

我使用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上测试网站时，我只能获得完整的网站。

我是否正在使用错误的平板电脑断点？或者是其他东西？我很困惑..因为它适用于移动设备和浏览器！

Answer 1

- 编辑2 -

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

经过进一步的研究，我注意到你在CDN上引用的CSS表格＃34; Bootstrap Gallery＆＃34;。问题出在这个文件上。此文件提及包括引导程序的媒体查询！完成上述更改并注释掉此文件后，该站点将以移动形式加载到适用于iPad的iPad中。

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

- 编辑2 -

- 编辑 -

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

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

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

- 结束编辑 -

如果您正在测试的平板电脑的纵向和横向模式中发生这种情况，或者只是在横向模式下，我很好奇。

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

如果要更改断点，还可以通过设置自定义引导实例来执行此操作。将中断点更改为1030px左右： http://getbootstrap.com/customize/#media-queries-breakpoints。

问题在于小型笔记本电脑的用户如果没有全屏显示您的网站，便会获得移动设备。

Bootstrap 3 - 媒体查询平板电脑断点

1 个答案: