Nat*_*ate 11 css mobile ruby-on-rails twitter-bootstrap
在过去的几周里,我一直在为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的结果是一样的
edu*_*ris 15
确保添加:
<meta name="viewport" content="width=device-width, initial-scale=1">
到你的<head>.
适合像Galaxy S3横向浏览器的大小,它看起来不错？
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">
网格的内部元素可能具有大于移动屏幕尺寸的固定宽度。检查元素的 CSS，找到宽度溢出的元素。
您可以使用媒体查询来解决宽度问题。像下面这样
@media (max-width: 320px) {
.element {
width: 90%;
}
}
| 归档时间： |
|
| 查看次数： |
9541 次 |
| 最近记录： |