Question

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

当用户点击小箭头时，整个事物向左移动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

尝试在＆lt; head＆gt;中添加此内容标签：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> 设置#sitenav position relative

防止 - 屏幕内容在移动Safari中调整页面大小

1 个答案: