iphone5(s) 下阅读官方文档有一个横向滚动条

[ghost]

以下内容是基于老版的 Mobi.css 官方网站的，已过时了。但是 bug 是存在的，请看后面的讨论内容。

---

使用的 Responsive Web Design Tester 测试。

不过手头没有 iphone5(s) 真机，不知道真机实测下是什么样的。

按理说横向不该出现滚动条，否则很影响滑动手感。

测试效果如下图：

[xcatliu]

我之前的手机是 iPhone5s，测试过应该没问题。 事实上我设置了最小宽度为 320px，小于这个宽度的话，就会有横向滚动。 你这个可能是因为右侧出新滚动条了，所以把屏幕宽度压小了？

如果有真机测试还请告知，谢谢！

[ghost]

hi, xcatliu!

我在真机上测试了一下，依然出现类似情况，页面可以左右滑动，出现水平滚动条。 测试设备有 iphone6、ipad mini2、1280*720 分辨率的华为手机。

这里是演示地址：http://zmrenwu.coding.me/mobi-blog-demo/

不知道是否是我写的 css 代码问题，还是使用 mobi 的方式不对。 能否帮忙在你的设备上测试一下并分析一下可能的原因？万分感谢！

[xcatliu]

@zmrenwu

感谢反馈！我看了下你的演示地址。确实是有问题。

看了下你的源码，应该是属于 Mobi.css 的一个 bug：

一旦将 container 搭配 units-gap-big 使用到一个 div 上，就会使得它的宽度大于屏幕宽度 （因为 container 的 width 是 100%，同时 units-gap-big 添加了 margin-left: -15px; margin-right: -15px;） 而外层又没有设置 overflow: hidden，所以就出现了横向滚动条。

目前的临时解决方案是：

container 不要和 units-gap-big 一起使用，可以这么用：

<div class="container">
  <div class="flex-left units-gap-big">
  </div>
</div>

这时 container 上有 overflow:hidden 就不会出现横向滚动条了。

另一个临时解决方案是给 body 添加 overflow-x: hidden，但是我觉得这样不是太好。

---

至于这个 bug 应该如何去解决。我还没有一个比较完美的想法，可以一起讨论下。

[xcatliu]

我觉得给 units-gap-big 设置左右负 margin 是正确的做法，这样的话内部的 unit 都是相同的地位（否则需要判断 first-child 和 last-child）。Bootstrap 也是这么做的。

这里 container 对应于 Bootstrap 中的 container，flex-left units-gap-big 对应于 Bootstrap 中的 row，unit 对应于 Bootstrap 中的 col。 没有人会在使用 Bootstrap 的时候，将 container 与 row 应用于一个 div，所以 Bootstrap 不存在这个问题。

[ghost]

感谢！是我没有仔细看文档，正确地用法应该是如你所说。