为移动设备定制纵向引导列

Posted 2023-03-06

【中文标题】为移动设备定制纵向引导列

【英文标题】：customizing bootstrap columns in portrait orientation for mobile devices

【发布时间】：2014-02-12 15:57:32

【问题描述】：

任务：尝试制作移动网页：http://jsfiddle.net/anujbhai/hgaH7/3/（还包括 jQuery 和 Bootstrap 文件以便正常运行）。

问题：页面应根据方向更改布局 - 在横向模式下

<div id="videoThumbs">...</div>

将在

下方显示 2 个缩略图和快照

<div id="billboard">...</div>

在纵向模式下，后者移动到屏幕左侧，而前者现在只显示一个缩略图，看起来像一个侧边栏。

仅使用媒体查询和 Bootstrap 很难做到这一点。我无法弄清楚通过 javascript 应用的正确逻辑。请帮忙。

【参考方案1】：

您可以尝试使用默认的 Bootstrap 响应式实用程序类。

查看文档：

http://getbootstrap.com/css/#responsive-utilities-classes http://getbootstrap.com/css/#grid-options

Small and Extra small devices 类可以用于纵向平板视图，Small 和 Medium 设备类可以用于横向模式，您需要尝试各种组合。

显然，这取决于平板电脑的屏幕尺寸，但这在 7" 和 9" 平板电脑上效果很好。

【讨论】：

Bootstrap 的响应式网格根据设备的分辨率工作。我想做的是根据设备的方向改变移动设备的布局。无论设备的分辨率是什么，当从横向翻转为纵向时，它都应该改变，反之亦然。到目前为止，我发现这超出了 Bootstrap 的范围。 mediaquery 更容易做到，但合并 Bootstrap 生成的缩略图视图需要更长的时间。我选择了各种组合，为此我可能需要帮助编写 JavaScript。

JavaScript 中唯一检测设备方向的方法是使用屏幕分辨率。只有在 Apache Cordova 这样的框架中，相对于设备硬件，您可以使用 JS 访问更多的方法。