Overflow-x：hidden不会阻止内容在移动浏览器中溢出 [英] Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
问题描述
我有一个网站这里。
在桌面浏览器，黑色菜单栏只适当地延伸到窗口的边缘，因为 body 有 overflow-x：hidden 。
在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都会显示其全宽，从而在页面右侧显示空格。据我所知，这个空格甚至不是 html 或 body 标签的一部分。
即使我在< head> 中将视口设置为特定宽度：
< meta name =viewportcontent =width = 1100，initial-scale = 1>
网站扩展到1100像素，但仍然有超出1100的空格。
我缺少什么？
在<$ c $里创建一个网站封装器div c> body 并将 overflow-x：hidden 应用于正文的包装器INSTEAD 或 html 解决了问题。
似乎解析< meta name =viewport> 标记的浏览器只是忽略<$ html 和正文标签上的 c $ c> overflow
I have a website here.
Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden.
In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags.
Even if I set the viewport to a specific width in the <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
The site expands to the 1100px but still has the whitespace beyond the 1100.
What am I missing? How do I keep the viewport to 1100 and cut off the overflow?
Creating a site wrapper div inside the body and applying the overflow-x:hidden to the wrapper INSTEAD of the body or html fixed the issue.
It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.
这篇关于Overflow-x：hidden不会阻止内容在移动浏览器中溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
