如何在Bootstrap 3中强制xs布局

Question

我正在使用Bootstrap 3制作一个小型Web项目。 在顶部，我按照大多数文档中的建议放置了这个：

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

它在桌面上工作正常但我的智能手机上的布局似乎很小（Galaxy Note）。因为这个网络应用程序主要用于智能手机，我想强制小屏幕，将其添加到html的主题部分：

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

它不起作用，我的屏幕分辨率大于768px的布局相同。

我想要实现的是Bootstrap在xs布局中以小尺寸屏幕尺寸运行，与屏幕分辨率无关。

由于

更新： 这是小提琴：Fiddle Link

  

我手机的显示指标为：density = 2.0 Dpi = 320 heightPixels = 800   scaledDensity = 2.0 widthPixels = 1280

编辑： 这是两个截图。 （我稍后会做一个小提琴）首先来自手机，第二个来自桌面。桌面截图是我想要在智能手机上获得的，即使它的分辨率与桌面相当。

桌面：

更新2： 我已添加此元标记，但它在Android默认浏览器或Chrome移动设备上没有任何更改：

<meta name="MobileOptimized" content="320">

Answer 1

您要实现的目标是覆盖Bootstrap的基本前提。 Bootstrap使用以下缩放类...

lg - 适用于超大型显示屏 md - 适用于标准尺寸的显示器，如台式机和笔记本电脑 sm - 适用于屏幕大小在7-11英寸范围内的平板电脑设备和设备 xs - 适用于手机和屏幕较小的设备

Bootstrap的目的是创建一个网站样式，它将根据屏幕大小自动调整自己。您可以使用md缩放类，如果使用较小的设备，则元素将折叠并堆叠在一起。