微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Overflow-x:hidden 不会阻止内容在移动浏览器中溢出

如何解决Overflow-x:hidden 不会阻止内容在移动浏览器中溢出

在 中创建站点包装器 div<body>并将 应用overflow-x:hidden包装器 而不是<body><html>解决问题。

解析标签的浏览器似乎<Meta name="viewport">只是忽略了和标签overflow上的属性html``body

注意:您可能还需要添加position: relative到包装器 div。

解决方法

我在这里有一个网站。

在桌面浏览器中查看,黑色菜单栏仅正确延伸到窗口边缘,body因为overflow-x:hidden.

在任何移动浏览器中,无论是 Android 还是
iOS,黑色菜单栏都会显示其全宽,这会在页面右侧带来空白。据我所知,这个空格甚至不是htmlorbody标签的一部分。

即使我将视口设置为以下特定宽度<head>

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

该站点扩展到 1100 像素,但仍有超过 1100 的空白。

我错过了什么?如何将视口保持在 1100 并切断溢出?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。