css - 溢出-x :hidden doesn't prevent content from overflowing in mobile browsers-6ren

css - 溢出-x :hidden doesn't prevent content from overflowing in mobile browsers

转载作者：行者123 更新时间：2023-11-28 03:52:33

25

4

我有一个网站 here .

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

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

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

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

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

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

最佳答案

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

似乎解析 <meta name="viewport"> 的浏览器标记简单地忽略 overflow html 上的属性和 body标签。

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

关于css - 溢出-x :hidden doesn't prevent content from overflowing in mobile browsers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43652660/

25

4

0

文章推荐： php - 切割 HTML 标签并重新包装 HTML 标签 Part/1

文章推荐： c++ - Qt 中的 WM_SOCKET

文章推荐： javascript - Highchars 百分比变异位置

swift - Xcode 10 错误 - "Profile doesn' t 包括 aps 环境授权“& "Profile doesn' t 支持推送通知”
我正在尝试将我的 xcode 应用程序存档到 Itunes，但我得到了 following errors : 1.) “配置文件不支持推送通知。” 2.) “配置文件不包含 aps-environme
c# - "Doesn' 尝试连接到域时没有访问域所需的权限
我正在尝试为我们的组织构建一个 Web 应用程序，它将使用我们的 O365 进行身份验证。在尝试使用管理员帐户连接到域时，我遇到了这个错误，其中提到 admin..onmicrosoft.com(全局
.net - “The project doesn' 不知道如何运行配置文件示例。WinUI”
当我尝试构建 MUAI 项目时，它给出错误“该项目不知道如何运行配置文件 sample.WinUI”。项目已构建但无法运行。我使用的是 Visual Studio 2022 Preview(17.0
F# 查询 "doesn' t 包含”
当某项包含在列表中时，有一个查询要搜索，但当某项不在列表中时，则没有查询。此查询查找在给定列表 cdiffnums 中没有 ContactNum 的 customer 对象。我该怎么做才能仅返回此列
perl - 重命名期间是否有文件 "doesn' t 存在”？
我们有一个黑盒第三方 Java 程序，可以从某个位置获取输入文件并制作 PDF。每次输入时，它都会将 list 文件放在同一位置，这需要我们以受控方式提供文件。 list (或 .xen/.que)是
jQuery: "Doesn' t 有“选择器？
我看到这个has选择器，hasnt 选择器在哪里？我想查找不包含图像的表格。最佳答案类似$("table:not(:has(img))")？关于jQuery: "Doesn' t 有“选择器？，
JavaScript 错误， "object doesn' 不支持此属性或方法”？
为什么？这让我发疯？？？ $(document).ready(function () { $('#slides1').bxSlider({ prev_
Kubernetes "the server doesn' t 有一个资源类型部署”
我是 kubernetes 的新手。我无法使用 kubectl 进行部署，但我可以在 kubernetes 仪表板上看到所有部署。我该如何解决这个问题？ user@master:~$ kubectl
javascript - img onClick ""doesn' 工作吗？
这个问题已经有答案了: What do querySelectorAll and getElementsBy* methods return? (12 个回答) 已关闭 6 年前。 HTML JS
Javascript，迭代两个对象数组并将一个项目从一个数组添加到另一个数组 "if it doesn' t 存在”
我有两个数组，一个包含字符串值，另一个包含整数值，尽管这可能很愚蠢，但我陷入了困境，我需要一点帮助，我想遍历两者，如果 arr1 包含 arr2 中不存在的项目，它将被推送到 newArray 这是我
mysql - "Table doesn' t存在”问题
我一直在尝试为我的网站安装一个 PHP 脚本，设置所有内容，通过脚本附带的 phpMyAdmin 导入 SQL 文件，但我面对的是一个空白页面，错误如下所示: File /home/user/publ
php - mysqli_error "doesn' t 有默认值”
我正在努力将站点的服务器从 PHP 5.2.17 升级到 5.5，以使其在未来的升级中保持新鲜，并安装其他需要 PHP 5.4+ 的软件。数据库有一个我正在测试的表，其中有许多列在初始 INSERT
c# - "Object doesn' t 在IE8和IE7中支持这个属性或方法
我一直收到这个错误: Object doesn't support this property or method 每当我在 IE7 和 IE8 中运行我的代码时。这是它停止的代码: _renderU
javascript - 匹配 "doesn' t"包含单词的文本的正则表达式？
我想使用正则表达式排除某些单词。输入文本: aaa1234 cc bbb1234 c1234 cc dd aacc cccc ccadf cc 输出文本: aaa1234 bbb1234 c1234
postgresql - 临时列 "doesn' t 存在吗？”
我有一个名为 adjust_status 的存储函数和一个包含 status 列的表 users。 select adjust_status(status) as adjusted_status
mysql - "Field doesn' t有一个默认值”没有严格模式
我有一个表，其中有一列由插入前触发器填充，该列设置为 NOT NULL 并且没有DEFAULT VALUE。当我执行 INSERT TABLE 而不传递此列时，我收到错误:1364 - Field
javascript - 将值格式化为 "doesn' t work'
这个问题已经有答案了: Modify the value of each textfield based on original value using jQuery (3 个回答) 已关闭去年。使
css - “@keyframe doesn' t级联”是什么意思？
我正在阅读 this , 它说 @keyframes rules don't cascade, so animations never derive keyframes from more than
ssl - "hostname doesn' t匹配“在PythonAnywhere中使用请求时
编辑:我解决了问题，请参阅答案中的链接。我正在使用 XMLHttpRequest AJAX API 将来自不同网站的数据发送到我们在 PythonAnywhere 中的服务器。奇怪的事情发生了:根据
c++ - "Windows doesn' t 支持正确的动态链接是什么意思？”
我已经阅读了 Linux 调用 dlopen() 和 dlsym() 的文档，它们分别打开一个动态库并在库中加载一个符号。这些调用似乎等同于 Windows 的 LoadLibrary() 和 Ge

首页

博学

6Ren·AI

商城

css - 溢出-x :hidden doesn't prevent content from overflowing in mobile browsers