android - Bootstrap 响应表在 iOS 上无法正确滚动，但在 Android 上运行良好

Question

我的网站有一个购物车响应表。在 Android 上，它工作正常...显示购物车的左半部分，滑动时，水平滚动条短暂出现，表格移动并显示右半部分。

在 iPhone 6 上，表格的左半部分似乎溢出了屏幕的边界，因此看起来很难看。滑动时，灰色滚动条也会出现，但屏幕几乎没有移动，然后弹回只显示左半部分。将我的手指放在屏幕上，我可以让大约 50% 的右半部分出现，然后当我的手指到达屏幕边缘时它会弹回。

我查看了以前的类似问题，并尝试了我能看到的解决方案，但没有一个有所作为。我试过:

overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;

我试过:

.table-responsive .table {
max-width: none;
}

我试过:

<meta name="viewport" content="width=device-width" />

和

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

在我的主页上。

我更改了我的 CSS 文件、bootstrap.css 和 bootstrap.min.css 文件。

表格的 HTML 代码非常简单:

<div data-bind='if: Items().length' class="table-responsive">
                        <table class="table  outside-border">
                            <thead>
                                <tr style="background-color: #eee;">
                                    <th>Prod #</th>
                                    <th>Qty</th>
                                    <th>Description</th>
                                    <th class="text-right">Price</th>
                                    <th class="text-right">Total</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="double-top-border">
                                    <td colspan="3" class="text-right ">Subtotal:
                                    </td>
                                    <td colspan="2" class="text-bold text-right">
                                        <span data-bind="text: '$' + SubTotal().toFixed(2)"></span>
                                    </td>
                                </tr>
....

---

这里是截图。前两个是 iPhone，后两个是 Android:

---

所以，基本上，我需要帮助让 iPhone 网站像 Android 上的网站一样工作，表格在屏幕上被干净地划分，没有切碎的边框和重叠，表格可以完全滚动，并且使表格在滚动时保持在右半部分并且不会弹回。感谢您的帮助!

Answer 1

似乎问题出在水平滚动中......

使用内联 css 到 div :

style="overflow-x:scroll"

<div data-bind='if: Items().length' class="table-responsive" style="overflow-x:scroll">

如果这行得通，则可以根据需要在特定类(class)上使用它。