Bootstrap 3-媒体查询平板电脑断点 [英] Bootstrap 3 - media queries Tablet Breakpoints

问题描述

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

I have created a website using Bootstrap 3 and media queries. This is my basic .css media query setup, using the mobile first approach.

/* 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>

In addition I have this meta set for Mobile viewport optimization in index.html: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

在调整浏览器chrome和firefox的大小时，所有断点均按预期工作。
对于移动设备（纵向和横向），都会显示移动版本。
但是，当在Samsung Galaxy Tab和Ipad上测试网站时，我只能得到完整的网站。

When rezizing my browsers chrome and firefox, all the breakpoints works as expected. For mobile, both portrait and landscape, the mobile version is showed. But while testing the web site on a Samsung Galaxy Tab and a Ipad, I only get the full scale site.

可能是因为我正在使用平板电脑的错误断点？或者是其他东西？由于它可以在移动设备和浏览器中使用，我感到困惑。

Could it be that I am using the wrong breakpoints for tablets? Or something else? I am confused.. due to the fact that it works on mobile and in the browser!

推荐答案

-编辑2-

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

I did more digging on your full site. I recreated your site locally and used a new version of bootstrap CSS, changing the break point to 767 px. I then changed the breakpoints in your custom CSS to 767 px. There was still an issue loading on iPads, the full site was still loading.

进一步研究后，我注意到您在CDN上引用的CSS表格是 Bootstrap Gallery 。问题出在这个文件上。该文件提及包括引导的媒体查询！在做出上述更改并注释掉该文件后，该网站将以iPad的移动形式加载到Portrait中。

Upon further research I noticed the CSS sheet that you are referencing on a CDN for "Bootstrap Gallery". The issue is with this file. This file mentions includes the media queries for bootstrap! After making the changed above and commenting out this file, the site loads in mobile form for iPads in Portrait.

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

-编辑2-

-编辑-

Twitter引导程序旨在显示Tablets的全屏站点。请注意，小型设备显示完整菜单，而其他小型设备显示移动菜单。

Twitter bootstrap was intended to show the full screen site for Tablets. Note that small devices show the full menu while extra small devices show the mobile menu.

为小屏幕设置的断点为768像素-纵向iPad的宽度模式-iPad呈现为小屏幕。要将iPad作为纵向模式（带有移动菜单）的超小型设备进行渲染，请将小屏幕断点的最小宽度更改为767px。

The break point set for small screens is at 768px - the width of the iPad in portrait mode - so the iPad renders as small screen. TO have the iPad render as an extra small device in portrait mode (with the mobile menu), change the min-width to 767px for the small screen break point.

< a href = https://github.com/twbs/bootstrap/issues/2155 rel = nofollow> https://github.com/twbs/bootstrap/issues/2155

-结束编辑-

我很好奇这是否适用于平板电脑的纵向和横向模式

I'm curious if this happens in both the portrait and landscape modes for the tablets you are testing or ONLY in the landscape mode.

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

I would expect this to happen in Landscape mode with the standard Bootstrap settings as the width of an iPad is 1024x and the medium breakpoint for bootstrap is 992px. Note that the iPad falls into that Medium category and Medium shows the the full menu and not the mobile menu.

如果您要更改断点，也可以通过以下方法进行操作设置自定义引导实例。将中等断点更改为1030px左右：
http://getbootstrap.com/自定义/＃media-queries-breakpoints 。

If you want to change the breakpoints you can also do this by setting up a custom bootstrap instance. Change the medium break point to somewhere around 1030px: http://getbootstrap.com/customize/#media-queries-breakpoints.

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

The issue here is that people on smaller laptops will get your mobile menu if they don't have your website in full screen.

这篇关于Bootstrap 3-媒体查询平板电脑断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！