引导程序无法在移动设备上正确缩放 [英] Bootstrap not scaling properly on mobile devices

问题描述

在过去的几周中，我一直在Rails中为本地大学开发一个网站，作为附带项目.这是我在Rails中的第一个生产站点，并使用Bootstrap加快了开发速度.该网站看起来不错，并且一切运行正常，但当我尝试从移动设备访问该网站时除外.首次加载页面时，页面会放大显示.我允许用户缩放比例，所以这不是一个大问题，只是一个我希望摆脱的烦人的小怪癖.

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.

仅当页面最初以垂直方向加载时才会发生.如果页面是水平加载的，就可以了.

It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.

这是我的元标记

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

垂直方向: http://imgur.com/guJIG5k

水平方向: http://imgur.com/SNwvPFD

在我的Galaxy S3，iPhone 5C和iPhone 5S上结果相同

The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S

推荐答案

网格的内部元素的固定宽度可能大于移动屏幕的大小.检查元素的CSS，以找到宽度溢出的元素.

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.

您可以使用媒体查询来解决宽度问题.像下面一样

You can use media queries to fix the width issue. Like below

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

这篇关于引导程序无法在移动设备上正确缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！