如何强制高 DPI 手机在引导程序中打开 xs 布局

Question

我正在使用 Bootstrap 3 创建一个网站，而我的 iPhone 和其他移动设备无法识别移动 (xs) 媒体查询。

由于 iPhone 4 具有高 DPI 分辨率，因此它正在打开平板电脑版本，如我在媒体查询中设置的那样。我的导航栏没有在我的手机中折叠，所以我无法正确访问我的菜单项。

如何强制iPhone 4等高DPI设备打开手机版？

Answer 1

Bootstrap 的设计是移动优先的。没有针对xs大小的媒体查询，因为这是“默认”CSS。我建议您查找并替换您所说的“平板电脑”版本的每个媒体查询。

例如，使用 Bootstrap 默认断点：

@media (min-width: 768px) {

改成

@media (min-width: 768px) and (-webkit-max-device-pixel-ratio: 1) {