Question

过去几周，我一直在为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的结果相同

Answer 1

确保添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

到<head>。

将Galaxy S3的浏览器大小调整为水平，看起来不错？

Answer 2

网格的内部元素可以具有比移动屏幕尺寸更大的固定宽度。检查元素的CSS以找到具有溢出宽度的元素。

您可以使用媒体查询来修复宽度问题。如下所示

@media (max-width: 320px) {
.element {
      width: 90%;   
     }
}

Answer 3

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">

Answer 4

我遇到了同样的问题。

我的容器宽度在css中为;

.container{
  width:640px
}

将width更改为max-width对我有用。

Bootstrap在移动设备上无法正确扩展

4 个答案: