twitter-bootstrap Bootstrap 无法在移动设备上正确缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21469972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap not scaling properly on mobile devices
提问by Nate
I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.
在过去的几周里，我一直在用 Rails 为当地大学开发一个网站，作为一个附带项目。这是我在 Rails 中的第一个生产站点，并使用 Bootstrap 来加速开发。该网站看起来不错，而且一切正常，除非我尝试从移动设备访问该网站。当你第一次加载一个页面时，页面看起来被放大了。我允许用户缩放所以这不是什么大问题，只是一个我希望摆脱的烦人的小怪癖。
It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.
它仅在页面最初以垂直方向加载时发生。如果页面是水平加载的，那就没问题了。
Here are my meta tags
这是我的元标记
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
Here are some pictures since I'm not overly sure I'm being clear.
这里有一些图片，因为我不太确定我是否清楚。
Vertical Orientation: http://imgur.com/guJIG5k
垂直方向：http: //imgur.com/guJIG5k
Horizontal Orientation: http://imgur.com/SNwvPFD
水平方向：http: //imgur.com/SNwvPFD
The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S
结果在我的 Galaxy S3、iPhone 5C 和 iPhone 5S 上是一样的
采纳答案by winnyboy5
The inner elements of the grid may have a fixed width more than the mobile screen size. Check the CSS of the elements to find the one with the overflowing width.
网格的内部元素可能具有比移动屏幕尺寸更大的固定宽度。检查元素的 CSS 以找到宽度溢出的元素。
You can use media queries to fix the width issue. Like below
您可以使用媒体查询来解决宽度问题。像下面
@media (max-width: 320px) {
.element {
width: 90%;
}
}
回答by edudepetris
Make sure you add:
确保添加：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
to your <head>.
到您的<head>.
Fit the size of browser like a Galaxy S3 horizontal, it looks good?
像 Galaxy S3 一样横向适配浏览器的大小，好看吗？
回答by Wadih M.
Winnyboy5's solution probably worked for you because you were not using the grid properly, but note that it's hard coding the size and if using a bigger screen, it won't adjust accordingly to take the space available, defeating the purpose of bootstrap.
Winnyboy5 的解决方案可能对你有用，因为你没有正确使用网格，但请注意，它对大小进行了硬编码，如果使用更大的屏幕，它不会相应地调整以占用可用空间，从而违背了引导程序的目的。
To make the viewport work as it's supposed to on mobiles, you have to make sure you have the needed the containerdiv wrapping everything:
为了使视口在移动设备上正常工作，您必须确保拥有container包装所有内容所需的div：
<div class="container">
Your other elements go in here
</div>
OR:
OR：
<div class="container-fluid">
Elements here
</div>
The only difference with "fluid" container is that it will take the entire space.
与“流体”容器的唯一区别是它将占用整个空间。
Then adding this to your head will work on mobiles:
然后将此添加到您的脑海中将适用于手机：
<meta name="viewport" content="width=device-width, initial-scale=1">
回答by richie
I faced the same issue.
我遇到了同样的问题。
I had the container width in the css as;
我在 css 中有容器宽度；
.container{
width:640px
}
Changing widthto max-widthworked for me.
更改width到max-width对我来说有效。
