Question

我知道如何使用bootstrap，但我想了解它的功能。我最近尝试在HTC One上使用getbootstrap.com，屏幕显示1900x1080。该页面仅显示一列和折叠导航。

但是由于首页上的布局使用的是col-sm-4，它应该切换到超过768px的多列布局。

通过什么方式可以引导告诉我，我正在使用智能手机？

编辑：偶然发现了这个帖子。运用警报（screen.width）你得到一个手机似乎发送到服务器的宽度，这个宽度小于实际的像素大小。例如。我的Lumia警告403px，技术上它垂直位置有720px。

Answer 1

将此添加到您的HTML头..

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这告诉较小的设备浏览器如何缩放页面。您可以在此处详细了解：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 2

我理解你的问题，还有另一种方法可以使用媒体来检测设备

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

device-pixel-ratio例如。

您可以检查设备像素比率，以便检测此类设备。

其他有趣的链接：Media queries and device pixel ratio

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Answer 3

Bootstrap使用媒体查询。查看bootstrap.css文件中的@media部分。

@media(max-width:767px){--some CSS--}
@media(min-width:768px){--some CSS--}
@media(min-width:992px){--some CSS--}
@media(min-width:1200px){--some CSS--}

Here该文档中解释相同内容的部分。另外，如果您想使用媒体查询，here是我推荐的链接（MDN）。

Answer 4

没有。 BOotstrap响应式设计基于渲染端口的水平分辨率 - 甚至不是screeen（当我将浏览器调整得更小时，我得到相同的行为）。

http://getbootstrap.com/css/#responsive-utilities

这里有一些定义。这基本上是Bootstrap响应式设计，根据可用的水平像素数将设备分为4类。没有什么说“这是一部手机”，如果分辨率低于768像素，它只会假设是手机。

bootstrap如何表明它是智能手机

4 个答案: