Question

我创建了一个水平滚动网站，但由于某种原因，ipad上的chrome会缩小整个布局以显示它而不启用水平滚动。

我创建了test file以使用以下代码复制此问题：

    <!doctype html>
    <html class="no-js" lang="en-US" dir="ltr">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">

            <!-- Title -->
            <title>Testing Horziontal Scroll</title>

            <!-- For responsive behavior -->
            <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">

            <style>
                .horizontal{
                    height: 500px;
                    width: 4000px;
                }
                .item{
                    width: 1000px; background: #f00; float: left; height:100%;
                }
                .item:nth-child(2){
                    background: #0f0;
                }
                .item:nth-child(3){
                    background: #00f;
                }
            </style>
        </head>
        <body>
            <div class="horizontal">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </body>
    </html>

我尝试删除了视图端口元标记，但它解决了问题，但是在其他设备上创建了问题。

Answer 1

您可以尝试将以下内容添加到CSS中：

body {
    overflow-y:scroll;
}

这将强制向左和向右溢出以设置为滚动。

希望这有帮助！

水平滚动不适用于Chrome iPad

1 个答案: