首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Overflow-x:hidden不能防止内容在移动浏览器中溢出

Overflow-x:hidden不能防止内容在移动浏览器中溢出
EN

Stack Overflow用户
提问于 2013-01-11 09:07:31
回答 15查看 233.9K关注 0票数 168

我有一个网站here

在桌面浏览器中查看时,由于body具有overflow-x:hidden,因此黑色菜单栏仅正确地延伸到窗口边缘。

在任何移动浏览器中,无论是安卓系统还是iOS系统,黑色菜单栏都会显示全宽,页面右侧留有空格。据我所知,这个空格甚至不是htmlbody标记的一部分。

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

代码语言:javascript
复制
<meta name="viewport" content="width=1100, initial-scale=1">

站点扩展到1100px,但仍然有超过1100的空白。

我遗漏了什么?如何将视口保持为1100并切断溢出?

EN

回答 15

Stack Overflow用户

发布于 2013-01-11 10:41:52

试一试

代码语言:javascript
复制
html, body {
  overflow-x:hidden 
} 

而不是仅仅

代码语言:javascript
复制
body {
  overflow-x:hidden 
}
票数 97
EN

Stack Overflow用户

发布于 2016-04-18 19:52:15

正如@Indigenuity所说,这似乎是由浏览器解析<meta name="viewport">标签引起的。

要从源头上解决此问题,请尝试以下操作:

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

在我的测试中,这阻止了用户缩小以查看溢出的内容,因此也阻止了平移/滚动到它。

票数 38
EN

Stack Overflow用户

发布于 2017-09-04 22:49:11

这是在Safari中解决水平滚动的最简单的解决方案。

代码语言:javascript
复制
html, body {
  position:relative;
  overflow-x:hidden;
}
票数 36
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14270084

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档