首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在“添加到主屏幕”之后保留iOS 13.2中的地址栏

在iOS 13.2中,当用户将网页添加到主屏幕后,地址栏默认是隐藏的。这样可以使网页看起来更像一个独立的应用程序。然而,如果你希望在添加到主屏幕后仍然保留地址栏,可以按照以下步骤进行操作:

  1. 打开Safari浏览器并访问你想要添加到主屏幕的网页。
  2. 点击底部的分享按钮(一个方框带箭头)。
  3. 在分享菜单中,向下滑动并找到“添加到主屏幕”选项,然后点击它。
  4. 在弹出的添加到主屏幕页面中,你可以看到网页的名称和图标预览。在这个页面上,你可以编辑网页的名称,然后点击“添加”按钮。
  5. 现在,网页将会被添加到主屏幕,并且地址栏将会被隐藏。

如果你希望在添加到主屏幕后保留地址栏,你可以使用以下方法:

  1. 在网页中添加一个自定义图标,该图标将作为网页的应用程序图标显示在主屏幕上。你可以在网页的HTML代码中添加以下代码来指定图标:
代码语言:txt
复制
<link rel="apple-touch-icon" href="path/to/icon.png">

其中,path/to/icon.png是你自定义图标的文件路径。

  1. 创建一个简单的JavaScript函数,用于在网页加载时自动跳转到完整的网页URL,以显示地址栏。你可以在网页的HTML代码中添加以下代码:
代码语言:txt
复制
<script>
    if (window.navigator.standalone) {
        var url = window.location.href;
        window.location.href = url;
    }
</script>

这段代码会检查用户是否通过主屏幕上的应用程序图标打开网页,如果是,则会自动跳转到完整的网页URL。

通过以上步骤,你可以在添加到主屏幕后保留iOS 13.2中的地址栏。请注意,这些方法只适用于iOS 13.2及更高版本的设备。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动Web 开发中的一些前端知识收集汇总

私有meta标签,它表示:允许全屏模式浏览,在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar; 第二个meta标签表示:强制让文档的宽度与设备的宽度保持...--不让android识别邮箱--> 自定义主屏上的图标 用户添加到主屏后,如果网站没有图标,则默认主屏上的图标为当前网页的截图,你可以通过下面的代码指定在普通和retina屏幕上的icon: iOS中键盘自动大写、自动更正、自动完成 在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了...-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-backface-visibility: hidden...事件在短按屏幕时会有明显延迟(相对用户手离开屏幕那一刻大约300ms),因此建议采用 touchstart 事件。

3.9K50

移动端常见问题解决方案

-webkit-box-sizing:border-boxx 清除点击高亮,设置transparent 完成透明 -webkit-tap-highlight-color:transparent; 取消ios...和 Chrome 内核 添加到主屏幕时隐藏地址栏和状态栏(即全屏) 当我们将一个网页添加到主屏幕时,会更希望它能有像 App 一样的表现,没有地址栏和状态栏全屏显示,代码如下: 该方案在 iOS...添加到主屏幕时设置系统顶栏颜色 当我们将一个网页添加到主屏幕时,还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置,前提是开启了: 有了这个前提,你可以通过下面的方式来进行定义: content...,网页从状态栏以下开始显示; 如果设置为 black-translucent,状态栏将为灰色半透明,网页将充满整个屏幕,状态栏会盖在网页之上; 该设置只在 iOS 上有效。...$('.open').click(()=>{ // 在弹出层显示之前,记录当前的滚动位置 scrollTop = getScrollTop(); $('.workflow-modal

1.2K10
  • 界面劫持之触屏劫持

    通过将一个不可见的iframe覆盖到当前网页上就可以劫持用户的触屏操作。由于手机屏幕范围有限,手机浏览器为了节省空间会把地址栏隐藏起来,因此在手机上的视觉欺骗更容易实施。...据悉超过78%的Android设备受此漏洞影响。02触屏劫持技术原理1.桌面浏览器iOS中的safari浏览器可以将一个网页添加到桌面,当做一个独立的应用运行。...添加后,主屏幕上会出现一个由网页缩略图生成的App图标。类似于快捷键方式。这样可以方便进行页面篡改等。...2.隐藏URL地址栏为了不让用户发现点击按钮后跳转到了奇怪的url地址,我们需要进行视觉欺骗,最简单有效的就是隐藏URL地址栏,除了用全屏模式隐藏URL地址栏外,还可以使用以下代码实现URL地址栏的隐藏...苹果手机在使用Safari浏览器的时候,遇到不明情况的提示框或页面,一定要确认地址栏的地址是否隐藏以及是否正确,若网站上含有触屏劫持,则大概率会添加假的地址栏做误导,需谨慎认清。

    33220

    自定义地址栏与收藏夹中的图标

    如果网站上传了这个图标文件,用户使用浏览器(仅限于支持这个功能的浏览器)浏览时,就可以把图标显示在浏览器的地址栏中(有时也会显示在历史记录中),如果添加了收藏则收藏夹中也可以看到图标。...主要使用在 Internet Explorer 的收藏夹中,如果网站被添加到收藏夹中,那么在地址栏中也会被显示出来。...这么做还有一个用意就是统计有多少用户收藏了这个网站(可以在日志中看 favicon 请求的次数)。现代浏览器则不管用户是否收藏该网站,都会把图标显示在地址栏或页签中。...的苹果(Apple)设备,以及部分安卓(Android)设备,可以使用 添加到主屏幕 Add to Home Screen(Web Clip) 功能在手机的主屏幕上添加一个自定义的图标。...一些如 SSLStrip 的中间人攻击工具也使用这种伎俩。为了识别这种伎俩,有的浏览器在Tab页签中显示 favicon ,在地址栏的最左边显示协议的安全状态。

    2K50

    【WebApp开发必知】移动游览器私有Meta属性

    Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。 一、Safari浏览器私有 Meta 属性 1.让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览...; 2.在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar; 3.其值有三个: default(白色)black(黑色) black-translucent...4.开启对web app程序的支持 5.是指在发送到屏幕的时候默认的命名。 6.让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。 二、QQ浏览器私有 Meta 属性(x5内核定制标签) 屏幕方向 --> <!

    1.8K20

    PWA - 令人惊奇的web用户体验新方法

    file 提供类似于 APP 的使用体验( 在 Android 上可以设置全屏显示,由于 Safari 支持度的问题,所以在 IOS 上并不可以 ),并且还能进行 ”推送通知” 。...安全:PWA使用https进行通信加密,防止了被第三方获取数据以及数据被篡改 推送:做到在不打开网页的前提下,推送新的消息 可安装:能够将 Web像 APP 一样添加到桌面,可以在主屏幕上创建图标 为什么是渐进式...Chrome 浏览器 debug 使用 Chrome 浏览器,可以通过进入控制台 Application -> Service Workers 面板查看和调试 APP Manifest (应用清单)与添加到主屏幕...Web App Manifest 是一个 JSON 格式的文件用来描述应用相关的信息,目的是提供将应用添加至桌面的功能: 能够将你浏览的网页添加到你的手机屏幕上 在 Android 上能够全屏启动,不显示地址栏...( 由于 Iphone 手机的浏览器是 Safari ,所以不支持哦) 控制屏幕 横屏 / 竖屏 展示 定义启动画面 可以设置你的应用启动是从主屏幕启动还是从 URL 启动 可以设置你添加屏幕上的应用程序图标

    2.7K10

    如何使用浏览器工具调试PWA

    清单(Manifest) 清单让用户可以选择把应用『添加到主屏幕』。清单提供了很多应用被安装到到设备该如何表现的细节说明。任何的错误定义清单将会报告问题。 ?...主题颜色:指示你网站的主题。Chrome使用这个主题颜色来着色浏览器的一些UI部分,比如地址栏。...可以使用meta标签来自定义每个页面的颜色,但是当应用从主屏启动时,在清单中指定的主题颜色提供站点范围的主题颜色。 ?...在桌面Chrome上,它会触发浏览器将应用添加到货架(shelf)。 在移动设备上,它提示安装应用程序(将图标添加到主屏幕): ?...在设备模式屏幕下,离线也是强制的,除网络节流。 重新加载更新:当调试时,这个非常有用。Service Workers首次加载时会将其安装在设备上。

    3.7K40

    将你的网站打造成一个iOS Web App

    Icon 当用户通过safari访问我们网站的时候,用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样,所以我们要给我们的网站添加应用Icon。 ? ?...如果你的网站也要可以在Ipad上访问,那么你还要针对不同的设备准备不同尺寸的icon,你可以通过sizes属性来指定icon的尺寸: 屏幕的iphone所需的尺寸是114x114,retina屏幕的ipad所需的尺寸是144x144。...如果有多个符合条件的icon,那么iOS会选择有precomposed关键词的那个。 如果在HTML中没有指定icon,那么iOS会到WEB根目录下寻找对应的icon。...隐藏Safari用户栏 为了更加像原生应用,我们还可以对Safari的用户栏和地址栏进行隐藏,这个叫作standalone模式,加入以下meta进入此模式: <meta name="apple-mobile-web-app-capable

    2.1K60

    PWA介绍及快速上手搭建一个PWA应用

    Engaging : PWA 可以添加在用户的主屏幕上,不用从应用商店进行下载,他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验( 在 Android 上可以设置全屏显示哦...,由于 Safari 支持度的问题,所以在 IOS 上并不可以 ),并且还能进行 ”推送通知” 。...Manifest 在 PWA 中的作用有: 能够将你浏览的网页添加到你的手机屏幕上 在 Android 上能够全屏启动,不显示地址栏 ( 由于 Iphone...手机的浏览器是 Safari ,所以不支持哦) 控制屏幕 横屏 / 竖屏 展示 定义启动画面 可以设置你的应用启动是从主屏幕启动还是从...: “ “ 用来告知浏览器用什么颜色来为地址栏等 UI 元素着色 background_color: “ ” 设置启动页面的背景颜色 icons:”” 就是添加到主屏幕之后的图标 { "name

    2.3K130

    苹果发布iOS12.2 beta:暗示AirPods 2将要到来

    其中最为引人注目的是,iOS 12.2 beta 中设置「Hey Siri」时,会出现“可通过 AirPods 或者 iPhone 来激活 Siri”的内容,而一代 AirPods 并不支持此功能,这似乎在暗示着二代...1.流畅度/耗电/发热:iOS12.2 beta 总体表现依旧流畅,网络连接问题和信号问题已有所缓解。新系统在升级和使用过程也未见明显的发热显现,续航问题没有什么特别的感受,还有待继续观察。...3.不安全网站提醒:未使用安全 HTTPS 连接的网页现在将以十分显眼的方式被标示出来,会在地址栏中显示「不安全」字样。...5.HomeKit TV 支持:苹果近日宣布多家厂商的电视已开始支持 HomeKit,而 iOS 12.2 也开始让用户将其电视添加到 HomeKit 框架中。...6.全新的图标:控制中心重新设计了屏幕镜像图标,从之前的单屏幕+箭头的图标改成现在的双屏幕设计。「隔空播放」图标也进行了重新设计。

    27130

    IOS开发系列——UIView专题之一:UIWindow篇

    iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控制器的view添加到UIWindow上,于是控制器的view就显示在屏幕上了。...一个iOS程序之所以能显示到屏幕上,完全是因为它有UIWindow。也就说,没有UIWindow,就看不见任何UI界面。...在程序启动完毕之后就会调用一次,创建过程如下: 提示:应用程序启动之后,先创建Application,再创建它的代理,之后创建UIwindow。UIWindow继承自UIview。...提示:如果UItextfield不显示,可以考虑设置它的样式,因为其创建默认是虚线的,没有边框。 在ios7里边,主窗口和次窗口是没有区别的。...在ios7以前中有区别:哪个是主窗口,后面设置为主窗口会把之前设置的覆盖掉。(只有主窗口才能响应键盘的输入事件,如果不能输入内容,可以查看是否是显示在主窗口上,不在主窗口上的不能响应。)

    93530

    爆料最新IOS18系统,这些功能真心好用到爆

    Apple 音乐可能会获得自动生成的列表,提醒应用程序有望与日历应用程序集成,照片应用程序有望具有人工智能照片修饰功能。 除了 AI 功能外,iOS 18 还将带来更加可定制的主屏幕。...应用程序图标可以放置在主屏幕网格上的任何位置,用户可以为应用程序图标选择自定义颜色。 据彭博社报道,马克·古尔曼认为,iOS 18 将是一个“相对突破性”的软件更新,具有“主要的新功能和设计”。...主屏幕改版 iOS 18 预计将具有更可自定义的主屏幕,为 iPhone 用户提供更多 iPhone 外观选择。Apple 计划让客户更好地控制其应用程序图标的排列方式。...iOS 18 可能会给我们带来多年来最重大的主屏幕更新,与苹果在 iOS 16 中推出的锁定屏幕更改相当。...图标颜色 苹果预计将允许用户在 iOS 18 中更改应用图标的颜色,因此图标将不再局限于开发人员提供的颜色。例如,用户可以将所有社交图标设为蓝色,或将所有消息相关图标设为绿色,从而简化主屏幕。

    20210

    2年内彻底摆脱英特尔,苹果重磅发布自研Mac芯片,并对“五大系统”再升级

    一直以来,简单,或者说是单一都是iOS主界面的特色之一,此次苹果为iOS 14增添了一项名为“App Library(应用资源库)”的功能,不仅能自动整理应用,还能从常用和最近打开的应用等维度进行智能分类...为解决这一问题,iOS 14对Widgets进行了重新设计,如尺寸可调、可显示于主屏幕、智能叠放等,都是为了给用户提供更直观、可定制化的内容即功能,如小部件可以叠放,且智能显示“重要的”信息。...画中画则是将iPadOS中的功能搬到了iOS上,即在iOS 14中,用户可以在主屏幕上以画中画的形式观看视频,窗口大小可调整,且视频总在主屏幕上层。与此同时,屏幕侧边还可隐藏,观感更加简洁。...当然,提到iOS便不得不提Siri,以往召唤Siri之后屏幕总是呈现黑色,iOS 14对此进行了重新设计,让Siri在主屏幕上以图标形式显示出来,全面实现“透明化”。...具体来看,iPadOS 14中,Apple Pencil可识别用户的手写内容,如用户可以在网页地址栏中直接通过手写的方式,让系统自动识别手写内容,且支持英文、中文、数字等多类型识别。

    99930

    没有新硬件的WWDC,就不行吗

    首先在FaceTime上,空间音频可在屏幕上反映通话者的位置,语音隔离功能可以减少背景噪音的干扰。人像模式的虚化背景也可以在FaceTime中使用,用户还可以在通话中分享音乐和视频。...比如下班后你就可以设置只接收亲人好友的通知。 同时,用户可以自定义主屏幕页面,选择适合的焦点模式的小工具和应用程序。不仅如此,用户还可以批量处理某些通知,将其作为摘要接收。 消息也有一些更新。...此前据传,iPadOS 15将使主屏幕更具可定制性,允许更灵活地放置小部件。...离iPadOS 15正式使用还有几周时间,或许在测试阶段,还会有更多的改进和惊喜。 macOS 12:加强和iPad互动 在iOS和iPadOS之后,全新版的macOS也不容小觑。...此外,Safari正在进行一些重新设计,标签和地址栏都移到了同一个地方,标签也获得了一种新的浮动外观。

    1.6K20
    领券