Bootstrap 框架如何识别浏览器和设备宽度？答案

【问题标题】：how Bootstrap framework identifies the browser and device width?Bootstrap 框架如何识别浏览器和设备宽度？
【发布时间】：2016-07-25 16:28:56
【问题描述】：

我是 Web 开发的新手，这是我开发我们实验室网站的任务。Bootstrap 框架说它们支持各种 11 种框架。它如何识别是chrome还是IE还是opera？它如何识别设备宽度？我认为必须用javascript编写一些函数来识别它，所以我试图理解bootstrap.min.js。但是找不到这样的功能。你能帮帮我吗，我们将不胜感激

【问题讨论】：

你要先浏览媒体屏幕css样式
w3schools.com/cssref/css3_pr_mediaquery.asp --- 除非您有更具体的问题，否则请阅读 @media 查询。
非常感谢您的 cmets。但是由于媒体查询还支持一些高级版本的浏览器，那么它实际上如何识别您正在使用的浏览器以及该浏览器的版本？

标签： javascript html css twitter-bootstrap

【解决方案1】：

它只是简单的媒体查询。它的概念非常简单。通过这个 CHRIS COYIER 的tutorial 了解它的工作原理，同样非常简单。

这是媒体查询的简单示例

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

这段代码说在屏幕尺寸从 600px 到 800px 时，html 背景颜色应该是红色；

【讨论】：

非常感谢您的帮助。
但是媒体查询有助于识别屏幕宽度，那么它是如何在内部实现该功能的，以及它实际上是如何识别 Bowser 的？
您不必担心代码将如何识别它是哪个浏览器。 Bootstrap 会自动处理这个问题。与浏览器相关的代码称为跨浏览器代码，要详细了解这一点，请谷歌“Smashing Magazine 的跨浏览器 CSS 编码原理”，这将对您有所帮助。