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

如果这样可行，那么如果需要，可以在特定类上使用它。

Bootstrap响应表无法在iOS上正确滚动，在Android

1 个答案: