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

过去几周，我一直在为当地大学的Rails开发一个网站。这是我在Rails的第一个生产站点，并使用Bootstrap来加速开发。该网站看起来很好，除了当我尝试从移动设备访问网站时，所有的工作都很好。当你第一次加载页面时，页面会放大。我允许用户缩放，所以这不是一个大问题，只是一个令人讨厌的小怪癖，我希望摆脱。Bootstrap在移动设备上无法正确缩放

它只发生在页面最初以垂直方向加载时。如果页面水平加载，那很好。

这里是我的meta标签

<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同样

来源

2014-01-30 Nate

网格的内部元素可能具有比手机屏幕大小更大的固定宽度。检查元素的CSS以找到溢出宽度的元素。

您可以使用媒体查询来修复宽度问题。像下面

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

来源

2014-01-31 06:01:07 winnyboy5

确保你加：

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

到您的<head>。

适合浏览器的大小，如Galaxy S3水平，看起来不错？

来源

2014-01-31 01:40:31 edudepetris

不起作用... – wordsforthewise

Winnyboy5的解决方案，因为你没有使用电网正常，但要注意，它是硬编码的大小，如果采用更大的屏幕，也不会进行相应的调整，以充分利用可用空间大概为你工作，击败了bootstrap的目的。

要视工作为它应该在手机上，你必须确保你所需要的container格包裹的一切：

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

来源

2017-02-05 17:04:23

我面临着同样的问题。

我在CSS中的容器宽度为;

.container{ 
    width:640px 
}

更改width到max-width为我工作。

来源

2017-09-14 20:06:59 richie

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

回答

相关问题