程序员经验分享-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） 的相关文章

  • 将事件添加到 Google Maps API InfoWindow 内的元素

    我想在 Google Maps API v3 InfoWindow 内放置一个带有输入字段和提交按钮的表单 提交后 我想调用一个函数 该函数使用输入字段中输入的地址启动方向服务 这是我的代码 我目前只测试方向事件是否被触发 我已经编写了完整

  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为

  • Chrome JavaScript 日期构造函数获取 1884 年之前的日期似乎是错误的

    如果我将 1 1 1753 午夜 的 unix 毫秒时间戳值 6847786800000 传递给 Chrome 中的 JavaScript Date 构造函数 则 Chrome 给出的日期看起来非常奇怪 当我使用带有七个参数的 Date 构

  • 修剪日期格式 PrimeNG 日历 - 删除时间戳、角度反应形式

    我将以下内容推入我的反应形式 obj 中2016 01 01T00 00 00 000Z但我想要以下2016 01 01 有谁知道有一个内置函数可以实现上述目的 我已经搜索过文档here https www primefaces org p

  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col

  • 如何避免 TypeScript 中出现虚假的“未使用参数”警告

    我遇到过很多次这种情况 最后决定弄清楚正确的方法是什么 如果我有一个声明方法的抽象父类 然后一些具体子类在其实现中实现真正的逻辑 并且显然使用方法参数 但某些子类不需要在该方法中执行任何操作 因此不要使用方法参数 那些不必执行任何操作的方法

  • 如何在 Angular 2 应用程序中使 DateAdapter 单例？

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo

  • HttpWebRequest vs Webclient（特殊场景）

    我知道这个问题之前已经回答过thread https stackoverflow com questions 1694388 webclient vs httpwebrequest httpwebresponse 但我似乎找不到详细信息 在

  • 如何使用 jest 通过 Promise.all 设置多次提取测试

    我在测试中使用 jest 我正在使用 React 和 Redux 并且执行以下操作 function getData id notify return dispatch gt dispatch anotherFunction Promise

  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s

  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这

  • JavaScript 中的最短路径

    几周来我一直在寻找一种在 JavaScript 中计算最短路径的方法 我一直在玩书数据结构和算法作者 格罗纳 Groner 名字恰如其分 https github com loiane javascript datastructs algo

  • Facebook API Javascript JSON 响应

    function getUser FB api me function response console log Response is response alert Your name is response first name ale

  • 如何显示 GroupList 的 FormArray？

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup

  • 什么是 TinyMCE jQuery 包？

    我被要求在项目中使用 TinyMCE 编辑器 在下载页面上 有一个主包 然后是一个 jQuery 包 This package contains special jQuery build of TinyMCE and a jQuery in

  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val

  • 如何解决此错误“不要使用对象作为类型”？

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data

  • YouTube iFrame Player API 无法在 DOMWindow 上执行 postMessage

    我正在尝试使用以下命令将 youtube 加载到我的网页中YouTube iFrame Player API 并在加载时出现以下错误 Failed to execute postMessage on DOMWindow The target

  • 如何调试 Node.js 应用程序？

    如何调试 Node js 服务器应用程序 现在我主要使用警报调试打印语句如下 sys puts sys inspect someVariable 一定有更好的调试方法 我知道谷歌浏览器 http en wikipedia org wiki

  • 用 Beautiful Soup 进行抓取：为什么 get_text 方法不返回该元素的文本？

    最近我一直在用 python 开发一个项目 其中涉及抓取一些网站的一些代理 我遇到的问题是 当我尝试抓取某个知名代理站点时 当我要求 Beautiful Soup 查找 IP 在代理表中的位置时 它并没有按照我的预期执行操作 我将尝试查找每

随机推荐

  • 在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 栏最小化 我的网络应用程序

热门标签