Bootstrap 无法在移动设备上正确缩放答案

【问题标题】：Bootstrap not scaling properly on mobile devicesBootstrap 无法在移动设备上正确缩放
【发布时间】：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 上的结果是一样的

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap mobile

【解决方案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 对我有用。

【讨论】：