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

Posted 2023-03-06

【中文标题】如何强制高 DPI 手机在引导程序中打开 xs 布局

【英文标题】：How to force high DPI mobiles to open xs layout in bootstrap

【发布时间】：2014-07-26 13:39:09

【问题描述】：

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

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

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

【问题讨论】：

检查您的视口设置。根据similar question：确保“您的 dom-head 中没有元视口”：<meta name="viewport" content="width=device-width, initial-scale=1" />

【参考方案1】：

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

例如，使用 Bootstrap 默认断点：

@media (min-width: 768px) 

改成

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