如何使用Bootstrap维护移动设备的响应能力？

Question

（从我的问题开始，因为人们因为我没有添加图片而投票并锁定它...所以我们去了，因为我得到了其他网站的答案，这对大型响应网站来说非常重要，我也提供答案）

我正在努力克服视口的像素密度（真实与硬件），即使在巨大的平板电脑上基本上也会破坏/折叠Bootstrap网站，因为它们具有巨大的分辨率（唉，它们默认为巨大的缩放，导致引导到折叠内容，即使它适合）。

这里，Bootstrap自己的网站，Desired effect：

但是，相反，即使在分辨率较高的设备上，我也会这样：

原因是视口标准，根据dpi“强制”缩放以防止网站渲染太小（例如：400dpi设备上的12px字体几乎不可读）。但是，我想让用户决定是否要缩放，而不是限制为硬编码缩放（例如，我的带有1920px的xperia Zq具有硬编码的220％缩放，留下更少超过900px的视口，这将使响应模式的引导程序崩溃）。

提示？

Answer 1

根据视口的规范（仍然是草稿但很可能很快就会成为标准，可以在这里找到参考：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag），如果你设置一个固定值到视口宽度，并不意味着视口将具有THAT宽度，但视口应具有至少该宽度。因此，例如，如果我将视口设置为1000px，则视口将被放大到该大小，从而导致较小的缩放，并导致引导程序不会崩溃。

根据规范，如果设备无法将视口放大到所需的大小，它将放大到最大可能的大小（唉，设备的实际像素宽度），但仍会强制执行缩放，可能会导致崩溃。

因此，防止可以处理屏幕的网站崩溃的解决方案，例如768px（Bootstrap对平板电脑的定义）是：

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

如果设备具有768或更多真实像素，这将防止崩溃，否则会折叠，因此如果有足够的空间，网站将显示就像在桌面上一样。

为什么这样做？（a.k.a.pros）

• 这些高dpi设备上的移动版本看起来就像桌面版本，即使它可以处理网站也不会崩溃
• 响应性将保留在这些设备上，而不是由于高视口约束（通常高于200％缩放）而自动折叠任何移动设备，您只是更改默认值＆＃34;开始缩放＆＃34; to＆＃34;开始unzoomed＆＃34;

为什么不呢？（a.k.a. cons）

• 通过缩小或禁用视口的缩放效果，字体和其他组件将呈现在＆＃34;实际大小＆＃34;，在高dpi设备上可能太小（如400dpi上的12px字体是几乎不可读） - 然而，用户仍然可以自由放大，这将导致网站根据需要崩溃，就像您在桌面版本上调整窗口大小一样。因此，此解决方案不会破坏任何内容，只需更改默认行为。
• 在非常小但DPI高的设备上，这仍然很烦人，因为每次都必须进行缩放，所以你指定的大小应该是SMALLER可能的大小，而不仅仅是强制设备的实际像素数和完全禁用缩放