twitter-bootstrap 引导程序如何在全高清（1920×1080）手机上工作？

How does bootstrap work on full hd(1920×1080) mobiles?

提问by user31782

The Bootstrap tutorialsays that include .col-xs-*for mobile devices(<768px). My question is that, if I make a website for small mobiles using .col-xs-*classes then that css rule will be applied only to those devices which have width less than 768px. Nowadays there are full hd mobiles which have width 1080px in 5 inch display. So would these mobile behave as Desktop computer(≥992px) for my bootstrap css? I want my css to be same for any 5 inches screen mobile device, be it HD or Full HD.

所述引导教程说，包括.col-xs-*用于移动设备（<768px）。我的问题是，如果我使用.col-xs-*类为小型移动设备创建网站，那么该 css 规则将仅适用于宽度小于 768 像素的设备。现在有全高清手机在 5 英寸显示屏中具有 1080 像素的宽度。那么对于我的 bootstrap css，这些移动设备是否可以作为台式计算机（≥992px）？我希望我的 css 对于任何 5 英寸屏幕移动设备都是相同的，无论是高清还是全高清。

回答by mmgross

TL;DR

TL; 博士

CSS pixels are not equal to physical pixels. Let each device/browser figure out how they should display your content, most likely they'll get it right.

CSS 像素不等于物理像素。让每个设备/浏览器弄清楚他们应该如何显示您的内容，很可能他们会做对。

Excursion: Bootstraps media-queries

游览：引导媒体查询

First, let's take a look at how Bootstrap works. Somewhere in a standard bootstrap.css you'll find this code (slightly modified and shortened for the sake of simplicity):

首先，让我们来看看 Bootstrap 是如何工作的。在标准 bootstrap.css 中的某处，您会发现此代码（为简单起见略作修改和缩短）：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Code bluntly borrowedfrom the official bootstrap docs.

直接从官方引导文档中借用的代码。

What resolution does your screen have?

你的屏幕分辨率是多少？

So, how does your browser determine, which media-queries are relevant? Let's assume it has a property I'd like to call magicalWidthfor now.

那么，您的浏览器如何确定哪些媒体查询是相关的？假设它有一个我现在想调用的属性magicalWidth。

Your browser than compares magicalWidthwith @media (min-width: @screen-sm-min)and if magicalWidthis greater than or equal to @screen-sm-minit takes all of the definitions inside { ... }into account, otherwise it just ignores them. The same goes for all other media queries.

你的浏览器比比较magicalWidth，@media (min-width: @screen-sm-min)如果magicalWidth大于或等于@screen-sm-min它会考虑里面的所有定义{ ... }，否则它只会忽略它们。所有其他媒体查询也是如此。

Now, what is magicalWidth? I can tell you that it is most likely notthe width of your screen or browser window in (physical) pixels. CSS uses the concept of logical pixelsto compute any measurement and our magicalWidthfrom above is exactly the width of your device or browser window in logicalpixels. You can pretty easily test this yourself, take a look at the following example:

现在，什么是magicalWidth？我可以告诉您，它很可能不是以（物理）像素为单位的屏幕或浏览器窗口的宽度。CSS 使用逻辑像素的概念来计算任何测量值，我们magicalWidth从上面开始就是以逻辑像素为单位的设备或浏览器窗口的宽度。你可以很容易地自己测试，看看下面的例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div>
</div>

If you look at this at full on your computer and zoom in, you'll notice how the layout changes until all cols are just stacked (i.e. the default behaviour for small displays), even though you didn't change the resolution of your screen or the size of your browser window.

如果您在计算机上完整查看并放大，您会注意到布局如何变化，直到所有列都刚刚堆叠（即小显示器的默认行为），即使您没有更改屏幕分辨率或浏览器窗口的大小。

And the same thing applies to your phone: When rendering content, your browser does not use physical pixels, but logical pixels to determine the size of your screen.

同样的事情也适用于您的手机：在呈现内容时，您的浏览器不使用物理像素，而是使用逻辑像素来确定屏幕的大小。

Viewport meta-tag

视口元标记

To do that, it creates a virtual viewport, where it renders the content and afterwards scales it to the size of your screen. Now you can decide the size of that viewport with

为此，它会创建一个虚拟视口，在其中呈现内容，然后将其缩放到您的屏幕大小。现在您可以决定该视口的大小

<meta name="viewport" content="width=...">

...can be a fixed size, for example

...可以是固定大小，例如

<meta name="viewport" content="width=600">

will cause the virtual viewport where everything is rendered to be 600px wide. ...can also be the special size device-widthwhich means the viewport will be as wide as your screen in logical pixels. Bootstrap recommends the following viewport tag:

将导致渲染所有内容的虚拟视口宽度为 600 像素。...也可以是特殊尺寸device-width，这意味着视口将以逻辑像素为单位与屏幕一样宽。Bootstrap 推荐使用以下视口标签：

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

So we have width=device-width. The other part initial-scale=1means that your page should initially be rendered at a zoom level of 100%.

所以我们有width=device-width. 另一部分initial-scale=1意味着您的页面最初应以 100% 的缩放级别呈现。

For a more in-depth explanation, see the MDN article on viewport.

有关更深入的解释，请参阅有关 viewport的MDN 文章。

Ratio between physical and logical

物理和逻辑之间的比率

There's also a thing called device-pixel-ratiothat determines the ratio between the physical and logical pixels. So for example if your phone has a full HD screen and a device-pixel-ratioof 3, its logical resolution will be (1920/3)x(1080/3) = 640x360 and that is well below Bootstraps lowest breakpoint. If device-pixel-ratiois 2, the logical resolution will be 960x540.

还有一种叫做device-pixel-ratio确定物理像素和逻辑像素之间的比率的东西。例如，如果您的手机具有全高清屏幕且 adevice-pixel-ratio为 3，则其逻辑分辨率将为 (1920/3)x(1080/3) = 640x360，并且远低于 Bootstraps 的最低断点。如果device-pixel-ratio是 2，则逻辑分辨率将为 960x540。

btw: You can use device-pixel-ratioalso in media queries:

顺便说一句：您也device-pixel-ratio可以在媒体查询中使用：

@media (min-device-pixel-ratio:2) { ... }

Bottom line

底线

Use Bootstrap or some other responsive framework or your own media-queries however you like and let each device/browser figure out how they should display your content, most likely they'll get it right (but that doesn't mean you shouldn't run tests to make sure)

随意使用 Bootstrap 或其他一些响应式框架或您自己的媒体查询，让每个设备/浏览器弄清楚他们应该如何显示您的内容，很可能他们会做对（但这并不意味着您不应该运行测试以确保）

回答by bugwheels94

If you see carefully bootstrap needs a meta tag named viewport

如果你仔细看到 bootstrap 需要一个名为 viewport的元标记

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

See the usage of this tag in Bootstrap

在 Bootstrap 中查看这个标签的用法

What If Someone don't use this tag?

Without this meta tag bootstrap will work just like you have explained in your question

如果有人不使用这个标签怎么办？

没有这个元标记引导程序将像您在问题中解释的那样工作

Now if you see the meta tag there is a property called widthwhich is being set to device-width.

现在，如果您看到元标记，则有一个名为的属性width被设置为device-width.

Now, What is device-width?

When you go to market and buy a HD phone of resolution 1080*1920 then there is also something called device pixel ratioassociated with every device( ranges from 1,2,3,4 ans so on increases for HD devices).

现在，什么是设备宽度？

当你去市场购买分辨率为 1080*1920 的高清手机时，每个设备都有一个叫做设备像素比的东西（范围从 1、2、3、4 等等，高清设备会增加）。

 

 

How is device-width calculated?

device-width is calculated using formula

device-width=real-width / device-pixel-ratio

设备宽度是如何计算的？

使用公式计算设备宽度

设备宽度=实际宽度/设备像素比

Device-width sets width of page to logical CSS pixelsand comes around 360px or 480px.(voila now every phone is same)

设备宽度将页面宽度设置为逻辑CSS 像素，大约为 360像素或 480像素。（瞧，现在每部手机都一样）

What pixels does media queries use upon which bootstrap is built?

Media queries use CSS pixels which is now changed to something like 360*480.

媒体查询使用哪些像素来构建引导程序？

媒体查询使用 CSS 像素，现在已更改为 360*480。

Without the viewport meta tag there were 1080 CSS pixels in width but with this tag now there are roughly 360 or 480 CSS pixels.

如果没有视口元标记，宽度为 1080 个 CSS 像素，但有了这个标记，现在大约有 360 或 480 个 CSS 像素。

---

---

For exampleif you buy a Lenovo K3 Note of resolution 1920*1080which has device pixel ratio 3 then the device-width will be

对于例如如果买分辨率的联想K3注1920×1080，其具有设备像素比3，那么所述设备宽度将是

1080/3 = 360px

1080/3 = 360 像素

which will be set to width property of viewport meta tag.

这将设置为视口元标记的宽度属性。

回答by Omari Victor Omosa

5inch could translate to 480px in y axis. Any 5inch display mobile is generally less than 768px. The dimensions does not calculate screen resolution but the actual dimensions. I have a 5inch screen 1080 full hd android phone and also a low resolution android phone of 540x960 pixels and it is a 4.3inch screen which could translate to 412.8px on y axis. and all of them behave in same manner when i use the .col-xs-*bootstrap css.

5inch 可以在 y 轴上转换为 480px。任何 5 英寸显示屏的手机通常都小于 768 像素。尺寸不计算屏幕分辨率，而是计算实际尺寸。我有一个 5 英寸屏幕的 1080 全高清安卓手机和一个 540x960 像素的低分辨率安卓手机，它是一个 4.3 英寸的屏幕，可以在 y 轴上转换为 412.8 像素。当我使用.col-xs-*bootstrap css时，它们都以相同的方式运行。

My verdict

我的判断

With reference to The answer hereand here

参考这里和这里的答案

my understanding is that the CSS breakpoints rely on the device-width and not the screen resolution.

我的理解是 CSS 断点依赖于设备宽度而不是屏幕分辨率。