高密度移动设备上的 Bootstrap 3 横向视图答案

【问题标题】：Bootstrap 3 Landscape View on High Density Mobile高密度移动设备上的 Bootstrap 3 横向视图
【发布时间】：2023-03-08 14:30:01
【问题描述】：

我刚刚使用版本 3 设计了我的第一个 Bootstrap 站点。在此之前，我一直在使用响应式网格系统。当我在 iPhone 5 或 LG G2 上横向查看时，像素密度会导致页面以小纵向视图显示。

我昨天花了很多时间阅读媒体查询，但我有点新手。假设我专门针对 iPhone 5 使用了其中一个查询。在 CSS 部分中，需要修改哪些默认类以使页面在横向时保持宽？

响应式网格系统没有在 CSS 中使用像素，据我记忆，我没有遇到这个问题。我需要彻底检查 Bootstrap CSS 来解决问题吗？

【问题讨论】：

媒体查询与像素宽度有关。您应该了解 iPhone 5 的横向宽度并进行相应调整。媒体查询位于您的 CSS 文件中，并以 @media 开头。我认为没有人会列出这些类，但您可以通过查看引导文档和/或您的 CSS 文件来找到它们。
我了解媒体查询。即使在横向模式下，iPhone 也特别使用最宽（568px）作为高度。所以我想我会解决两个问题。是否需要修改 @media (max-width:768px) 的每个查询以便它了解设备像素？

【解决方案1】：

您需要设置视口比例。例如。 <meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

您是否正在寻找针对高像素密度设备的媒体查询？
我并不是专门针对这些设备。大多数帖子都是关于这样做的。我希望页面在横向模式下保持宽阔，就像像素比为 1 的设备一样。
你能添加一个 jsfiddle 或 codepen 来说明你想要什么吗？
我不想做任何特别的事情。如果您在 iPhone 5、LG G2 或 Samsung S4 上以横向方式访问 Bootstap v3 官方网站，则该页面的视图为 1 的手机，显示像低分辨率屏幕。