IOS启用WebApp全屏模式

最新推荐文章于 2023-03-22 11:10:35 发布
最新推荐文章于 2023-03-22 11:10:35 发布
阅读量1.4k 收藏 2
点赞数
原文链接：https://yq.aliyun.com/articles/572912
版权
分享一段代码实例，它实现了IOS启用WebApp全屏模式的功能。

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

代码实例如下:

1
2
< meta name = "apple-mobile-web-app-capable" content = "yes" />
< meta name = "apple-touch-fullscreen" content = "yes" />



原文发布时间为：2017-2-20

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：IOS启用WebApp全屏模式

weixin_33851177
关注
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 3899
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
移动Web开发小结——判断iOS和Android及PC端
人间草木
09-23 322
在做移动端时，想起用navigator.userAgent来对浏览器类型进行判断，查了点资料，在这里总结下 还有一个就是移动端的缩放问题，在meta标签中进行设置，对部分浏览器进行强制性的限制 1.navigator的一些常用属性 navigator为window对象的一个属性，指向了一个包含浏览器相关信息的对象 navigator.appVersion 浏览器的版本号 navigator...
移动开发webapp开发常用meta设置手机浏览器全屏模式
weixin_33874713的博客
04-02 1029
1、WebApp全屏模式： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"> 注意：viewport 后面加上minimal-ui 在safri 体现效果 ...
IOS界面全屏模式
刘修吉的博客
01-08 954
如果只是想把当前页面的状态栏隐藏的话，直接用下面的代码就可以  [[UIApplication sharedApplication] setStatusBarHidden:TRUE]; 如果你要在整个app中把提示栏隐藏，使用全屏模式，需要在Info.plist中进行如下设置： Status bar is initially hidden    YES View controlle
IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕
dicha7140的博客
01-10 755
请注意！！！使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于margin,padding，或者定位。就是单纯的空出来非常难调试。其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定义图标 测试资源下载：https://github.com/dragon8github/mobile-boilerplate/tree/master/img/touch &l...
让你的app在iPhoneX中全屏显示
weixin_34138255的博客
09-18 1042
如果你的项目什么也不修改,直接把你的app运行在 iPhone X 模拟器下,很有可能就会出现下面的情形: 上下都有黑边,没有全屏显示       为了让app能够全屏显示,你需要准备以下的内容   Xcode 9.0    iconName@3x.png,尺寸为 1125px * 2436px   配置 Brand Assets 之后,出现了 iPhone X 的启动图选项     将你的...
检测iOS Web应用程序是否运行在全屏模式
isoft8
03-08 1282
iOS上的Safari浏览器可以让Web应用程序全屏显示，以取得类似本地应用的显示效果。但是这需要用户把Web应用程序的图标添加到主屏幕才可以。作为开发者，为了更好的显示效果，我们可能希望自己开发的Web应用程序在非全屏状态下运行时提示用户把Web应用程序的图标添加到主屏幕。 要检测Web应用程序当前是否运行在全屏状态，只要检测window.navigator.standalone是否为tr
[html] 如何在IOS下启用WebApp全屏模式？
歌谣的博客
03-21 1133
[html] 如何在IOS下启用WebApp全屏模式？ 手机端打开Web检查器，Mac端接入手机，打开Safari开发模式。 设置<meta>标签： <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" /> 然后将网站添加到主屏幕，点击将以全屏模式启动。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。
ios全屏模式下避免跳转到safari浏览器，在苹果safari上实现全屏效果（让web页面以独立app的形式运行）
最新发布
03-22 3444
添加meta标签，打开谷歌浏览器点击添加到主屏幕，重新启动，实现自动全屏（没有底部的地址栏了）。你可能不知道的一个功能：web 单页面应用可以在手机端以类似独立 app 的形式运行。有了这种功能，我们还需要给独立web页面添加一个在桌面上显示的图标。如果不放心，就再配合下面这个meta，将顶部状态栏变为白色。为透明，内容滚动的时候，透过状态栏可以看到下面的内容。重点是在safari中打开，然后点击中间的分享，找到。，应用以全屏模式运行，否则不会在全屏中运行。为不透明，看不到下面的内容。
HTML5实现webApp中图片轮播的效果（一）之基本使用
热门推荐
清晨
05-19 7万+
最近开始用h5做一款BBS类的webapp，做好后嵌入公司的其他几个Android或ios应用中，这差不多算是混编开发了吧 在我看来，原生app和webapp各有优缺点，原生应用赢在稳定性好、用户体验度高，而webapp则在跨平台性、灵活度方面更胜一筹，随着近几年h5的火爆，webapp也越来越受大家的关注，如果你够仔细的话，你会发现现在很多牛b的app全都采用原生+webapp的方式来开发，我觉
iphone的safari浏览器中实现全屏浏览的方法
01-05
正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。 Add to Home Screen 说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是“Add to Home Screen”。（就在Safari浏览器最下方，最中间的那个位置，点击选择即可）这个功能类似于把网页地址作为一个超链接的方式放到手机桌面，并且可以直接访问。不过要注意的是每个链接都需要js进行一次特殊处理，那就是监听页面点击事件，如果是链接，则使用[removed] = this.href;，这样页面就不会从当
jQuery 记录搜索历史 localstorage 实战分享
愿你走过半生，归来任是少年。
03-02 2187
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;搜索问题&lt;/title&gt; &lt;meta name="viewport" content="widt
HTML面试题汇总
歌谣的博客
12-01 850
【HTML】 [html] 你有使用过MediaRecorder吗？说说它的运用场景有哪些？ [html] 进入编辑页面时，如何把光标聚焦到第一个input？ [html] 如何给input的右上角加个清除的按钮 [html] 举例说明只用html和css如何使得一个列表编号倒序？ [html] H5页面在微信中如何禁止分享给好友和朋友圈？ [html] http中的301、302、307、308有什么区别？ [html] 说说你对短链接的理解，它有什么应用场景呢？ [html] 网页中的友情链接有什么作用
全屏方法requestFullscreen在ios等部分设备上不支持
qq_35052138的博客
08-10 3078
解决requestFullscreen不兼容问题
iOS常用方法——UIWebView全屏显示的实现
浅浅的博客
07-05 6887
项目中加载webView，导航栏由web端做的话，客户端就需要隐藏掉导航栏。这个时候显示出来的页面，在顶部会出现状态栏为空白的问题。底部也会多出空白，即： - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a ...
iOS13页面无法全屏展示--presentViewController
榭榭的盒子
12-20 7307
最近手机升级iOS13后，运行程序发现了一个问题。调用presentViewController的时候，页面无法全屏显示，顶部会有一些空白。 查了下发现是presentViewController的页面展示默认方式有所变更。presentViewController是通过modalPresentationStyle这个属性来设置展示形式的。定义如下： typedef NS_ENUM(NSIn...
iOS视频播放全屏效果实现
chaoaifan的博客
01-11 5257
概述 最近在做有关音视频的项目，项目中涉及到全屏播放切换的问题，最近研究了一下。在此做个记录，实现全屏效果我目前能够用两种方法实现，一种是让App需要进行全屏的页面随着设备进行旋转，另外一种是把需要全屏的view放到window上面，为window添加旋转动画。在这介绍的是使用window实现全屏功能。 效果 #import "VideoFullScreenController.h" st...
safari html5 自动全屏,IOS10全屏safari Javascript
weixin_34665386的博客
06-07 1791
当用户点击网站上的按钮时,我正试图让div全屏显示.唯一的问题是,除了IOS上的Safari之外,每个浏览器似乎都想工作.我需要做些什么才能使其全屏？我尝试过研究,却找不到任何东西.继承我目前的代码：function goFullscreen(id) {var element = document.getElementById(id);var isInFullScreen = (document....
iPhone WebApp开发全攻略：从入门到高级实践
6. **特性**：介绍了一些特定于iOS的WebApp特性和API，如离线存储、推送通知等，帮助开发者充分利用设备能力。 7. **CSS**：深入探讨了如何优化CSS以适应iPhone的界面设计，包括响应式布局、视觉样式等。 8. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值