html - 防止屏幕内容调整移动 safari 上的页面大小

Question

我目前正在为响应式网站创建移动导航菜单。

截图: http://i.stack.imgur.com/hf3IH.png

当用户点击小箭头时，整个东西向左移动 100vw。用户不应该看到的部分应该在屏幕外，但如您所见，移动版 Safari 会调整页面大小以显示它们。

我该如何解决这个问题？

编辑:忘记添加代码，很抱歉，这里是:

#sitenav, #sitenav ul{
                    position: absolute;
                    width: 100vw;
                    background-color: white;
                    border: black solid 1px;
                    top: 80px;
                    left: 0;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    overflow: visible;
                    background-color: #FCF9F0;
                }

                #sitenav ul {
                    left: 100vw;
                    top: 0;
                }

HTML 写成:

<ul class='navbar-dropdown' id="sitenav">
                        <li>
                            <a href=''>Verblijven</a>
                            <ul>
                                <li>Huizen of chalets</li>
                                <li>Het indiaans dorp</li>
                                <li>Het gallisch dorp</li>
                            </ul>
                        </li>
                        <li>Activiteiten
                            <ul>
                                <li>Afdeling "River"
                                    <ul>
                                        <li>Kayak / Kano</li>
                                        <li>Rafting</li>
                                    </ul>
                                </li>
etc...

第二次编辑:

问题似乎可以通过使用这些 CSS 规则将整个内容包装在一个 div 中来解决:

div.clip-abs {
    width: 100vw;
    height: 100vh;
    position:absolute;
    overflow: hidden;
}

这感觉有点hackish，它忽略了分离数据和样式的概念。由于页面是响应式的，我现在有一个对桌面用户无用的 div。这是唯一的方法吗？

Answer 1

尝试在 标签中添加:<br/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> 设置#sitenav 相对位置