Bootstrap 无法在移动设备上正确缩放
Posted
技术标签:
【中文标题】Bootstrap 无法在移动设备上正确缩放【英文标题】：Bootstrap not scaling properly on mobile devices 【发布时间】：2014-01-30 23:51:37 【问题描述】：在过去的几周里，我一直在为当地的一所大学开发一个 Rails 网站作为副项目。这是我在 Rails 中的第一个生产站点，并使用 Bootstrap 来加速开发。该网站看起来不错，一切正常，除非我尝试从移动设备访问该网站。当您第一次加载页面时，页面会放大。我允许用户缩放，所以这不是什么大问题，只是我希望摆脱的一个烦人的小怪癖。
仅当页面最初以垂直方向加载时才会发生。如果页面是水平加载的就可以了。
这是我的元标记
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
这里有一些图片，因为我不太确定我是否清楚。
垂直方向： http://imgur.com/guJIG5k
水平方向： http://imgur.com/SNwvPFD
我的 Galaxy S3、iPhone 5C 和 iPhone 5S 上的结果是一样的
【问题讨论】：
【参考方案1】：确保添加：
<meta name="viewport" content="width=device-width, initial-scale=1">
致您的<head>。
像 Galaxy S3 一样横放浏览器的大小，好看吗？
【讨论】：
【参考方案2】：Winnyboy5 的解决方案可能对您有用，因为您没有正确使用网格，但请注意，它很难对尺寸进行编码，如果使用更大的屏幕，它不会相应地调整以占用可用空间，从而违背了引导程序的目的.
要使视口在移动设备上正常工作，您必须确保拥有所需的 container div 包装所有内容：
<div class="container">
Your other elements go in here
</div>
OR:
<div class="container-fluid">
Elements here
</div>
与“流体”容器的唯一区别是它会占用整个空间。
然后将其添加到您的头上将可以在手机上使用：
<meta name="viewport" content="width=device-width, initial-scale=1">
【讨论】：
【参考方案3】：网格的内部元素可能具有比移动屏幕尺寸更大的固定宽度。 检查元素的 CSS 以找到宽度溢出的元素。
您可以使用媒体查询来解决宽度问题。如下所示
@media (max-width: 320px)
.element
width: 90%;
【讨论】：
【参考方案4】：我遇到了同样的问题。
我将 css 中的容器宽度设为；
.container
width:640px
将width 更改为max-width 对我有用。
【讨论】：
以上是关于Bootstrap 无法在移动设备上正确缩放的主要内容，如果未能解决你的问题，请参考以下文章
将 Youtube 视频正确嵌入到 bootstrap 3.0 页面