程序员经验分享-hwhale

在 React 中加载时隐藏移动浏览器的地址栏（IOS / Android）

2024-03-13

Safari and Chrome移动设备上的页面加载时都包含可见的地址栏。当页面主体滚动时，URL 栏最小化:

我的项目基于ReactJS 和我试图在页面加载时实现这个结果（因此不需要用户交互，页面需要加载URL 栏最小化。我的网络应用程序是由单页 and 没有滚动是可能的（类似于谷歌地图的应用程序）。

到目前为止我尝试过的（在 iPhone X 上）：

  1. 清单.json> "display": "standalone" > 这使得 URL 栏仅在页面保存到主页时消失（不是一个好选择）
  2. window.scrollTo(0, 1);在index.js中（所以它在加载时被调用），没有发生任何事情，也许只触发onScroll，但我不能这样做。

参考：https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ https://developers.google.com/web/fundamentals/native-hardware/fullscreen/


对于Safari： 

<meta name="apple-mobile-web-app-capable" content="yes">

如果 content 设置为 yes，则 Web 应用程序以全屏模式运行。 来源：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

对于 Chrome： 

<meta name="mobile-web-app-capable" content="yes">

它与上面的功能相同，但是，这是针对 android 的，而上面的则是针对 ios 的。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

ReactJS

URL

Mobile

在 React 中加载时隐藏移动浏览器的地址栏（IOS / Android） 的相关文章

  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的

  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状

  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va

  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa

  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa

  • React-Redux：state.setIn() 和 state.set() 有什么区别？

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo

  • 如何纠正流警告：解构（缺少注释）

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码

  • 网站的主体和元素固定在 980px 宽度上，不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width

  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on

  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后

  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内

  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func

  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区

  • 如何渲染变量（或 prop）内部的 jsx/html？

    const Footer gt let a b Hey b return div Some bold text a div 这只会呈现为Some bold text b Hey b 如何将粗体文本渲染为粗体 变量内容是我自己的 所以我不必担

  • 使用css bootstrap时如何仅向一列添加右边框？

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

  • 在 JavaScript 循环之外声明变量可以提高速度和内存？

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var

  • HTML 锚点，禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la

随机推荐

  • 在laravel中编写查询join sum groupby

    请帮我写查询 我有 2 个表 项目 和 债务 债务 表有 id project id currency list total 1 1 1 1000 2 1 2 500 3 2 1 1000 4 2 2 500 我需要编写查询以从项目中获取

  • Rails 2.3.5 在 (?) 中使用时动态构建条件数组的问题

    导轨2 3 5 我研究了许多与动态构建 ActiveRecord 查找条件相关的其他问题 我知道有一些很棒的东西 比如搜索逻辑 而且 Rails3 中更好 但是 我正在使用 geokit 进行地理空间搜索 并且我正在尝试构建一个标准条件集

  • SQL Server 2008 R2 将数字转换为数据类型数字时出现算术溢出错误

    我在 SQL Server 2008 R2 上遇到了一个我无法理解的令人困惑的错误 但是 当我在本地服务器 也包括 SQL Server 2008 R2 上尝试相同的请求时 一切正常 所以这是引发问题的请求 select cast cast

  • 在 MVC 中添加许多 CDN 捆绑包

    我正在尝试为生日创建一个日期时间选择器 您可以see here https stackoverflow com questions 34271030 change language to bootstrap datetimepicker 该

  • 与自己的班级交友“>>”

    我有以下课程 我与它交了朋友cout现在我正在尝试与它交朋友cin但我收到错误 任何人都可以帮助我 或者告诉我我做错了什么吗 error c mingw bin lib gcc mingw32 4 6 1 include c bits st

  • 是否有一个手势识别器可以同时处理捏合和平移？

    因此 我正在使用 iOS 4 2 向我的应用程序添加缩放和平移功能 我已经实现了 UIPinchGestureRecognizer 和 UIPanGestureRecognizer 的实例 在我看来 一次只有一个能够识别一个手势 特别是 后

  • 在 Rails 助手的类中使用 link_to

    我有一个使用下面结构的 Rails 助手 但是当我使用它时 我收到消息 undefined method link to 助手安排如下 module MyHelper class Facet def render for search li

  • Dalvik 正在寻找扩展名为“.0”的 .so 文件 - 为什么？

    我已经开始开发一个非常简单的 Android 应用程序 它由三部分组成 Java应用程序本身 一个预先构建的共享库 我们将其称为libfoo 另一个使用预构建库的共享库 我们将其称为libfoowrapper 文件系统看起来像这样 jni

  • PHP 条件取决于窗口宽度（媒体查询？）

    我有一个响应式网站 我需要一些 PHP 条件 具体取决于窗口宽度 或媒体查询 Example if window width gt 1400px echo Your window is wider than 1400px elseif wi

  • 将变量传递到新页面而不使用查询字符串

    有没有一种方法可以将变量从具有弹出 iframe 的 1 个页面传递到客户端按钮单击上的弹出窗口 iframe 而不使用查询字符串 我的变量太大而无法使用查询字符串 提出同样问题的另一种方式 有没有办法在客户端按钮单击时将变量从一个页面传递

  • 用 python 生成随机 ISO8601 日期？

    我已经看到如何从 ISO 格式的日期开始 例如2007 01 14T20 34 22 00 00 使用 python 转换为更具可读性的格式datetime 有没有一种简单的方法来生成随机 ISO8601 日期如同这个答案 https st

  • Cygwin 编译错误：“此应用程序已请求运行时以不寻常的方式终止它”

    我正在尝试运行 Cygwin 但遇到了一些问题 我尝试用 mingw 编译一个既可以在 Windows 上运行也可以在 Unix 系统上运行的程序 但是当我通过 Cygwin 编译它时 gcc threads c o threads 我收到

  • 使用 Sequelize 将多个参数安全地发送到 IN 子句以进行原始查询

    使用 Sequelize 我可以执行原始查询并安全地发送参数 感谢通过参数进行数据库绑定参数 const baz 1 sequelize query select from foo where bar baz replacements ba

  • 如何避免使用JPA注释循环引用？

    我正在为一家商店注释我的域模型 使用 JPA 2 使用 Hibernate Provider 商店里的每件产品都可以有一个Category 每个类别可以分配给多个超级类别和子类别 这意味着 蜡烛 类别可以将 餐厅 和 装饰 作为父类别 将

  • 在 Microsoft Visual Basic 6.0 中填充组合框

    我在 Microsoft Visual Basic 6 0 中有一个组合框 我必须将项目添加到组合框中 这些项目存储在 SQL 数据库中的 Column1 表中 我不确定如何让这些项目在运行时显示在组合框中 以便用户可以选择不同的选项 注

  • 从命令行查找目录中的文件

    在 eclipse 和 textmate 等编辑器 IDE 中 有一些快捷方式可以快速查找项目目录中的特定文件 是否有类似的工具可以在 bash 或其他 shell 中 递归地 对目录中的文件名进行完整路径补全 我的项目有很多目录 而且还有

  • 如何在java中对用户输入进行单元测试

    我试图了解如何测试用户的输入 请注意 我不是在尝试进行模拟测试 而是对实际用户输入的测试 目前 正如您在我的程序中看到的那样 我已经对测试用例的值进行了硬编码 并且它通过了所有测试 但是我如何获取用户的输入并对其进行测试 有没有一种方法可以

  • 如何从另一个模型引用 Django 模型

    我希望在管理面板中为一个测试程序创建一个视图 该程序记录书籍 出版商和作者 如 djangoproject com 我定义了以下两个模型 class Author models Model first name models CharFie

  • Applescript 和 iCal 交互

    我正在尝试编写一个 AppleScript 来查询 iCal 并查找任何日历中给定日期的所有事件 我首先编写一个简单的脚本 对给定日历中的每个事件执行一些简单的操作 tell application iCal tell calendar R

  • 在 React 中加载时隐藏移动浏览器的地址栏（IOS / Android）

    Safari and Chrome移动设备上的页面加载时都包含可见的地址栏 当页面主体滚动时 URL 栏最小化 我的项目基于ReactJS 和我试图在页面加载时实现这个结果 因此不需要用户交互 页面需要加载URL 栏最小化 我的网络应用程序

热门标签