适用于Android的全屏Web应用程序

我想在Android上以全屏模式运行我用HTML5编程的Web App。 (隐藏状态栏和地址/导航栏)

对于iOS你只写:

<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

但是这在Android上不起作用。

Javascript有很多解决scheme,但是我尝试的所有解决scheme都不起作用。

有人知道解决scheme?

我不认为你会find一个全球性的解决scheme,因为不是每个人都使用默认的安卓浏览器(例如我喜欢海豚)。

面对这个事实,你将需要尝试每一个肮脏的JavaScript黑客来强制这种行为。

苹果设备工作的唯一原因是苹果对开发自定义浏览器的限制性很强,每个人都坚持默认的应用程序。

这适用于Android的Chrome浏览器。

将此添加到头标签:

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

然后在Chrome浏览器菜单中,转到添加到主页。 此图标现在将全屏打开您的网站。

我使用了用于iOS的HTML元标记和JavaScript解决scheme的组合。 它带走了iOS和Android设备上的地址栏。 它不会取出iOS上的底部栏,因为当用户在主屏幕上将HTML5应用程序安装为HTML5应用程序时,这只会消失。

 <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <script type='text/javascript' charset='utf-8'> // Hides mobile browser's address bar when page is done loading. window.addEventListener('load', function(e) { setTimeout(function() { window.scrollTo(0, 1); }, 1); }, false); </script> 

我在后端使用PHP来仅使用以下移动浏览器检测呈现用于移动浏览器的JavaScript

 if (preg_match('/iphone|ipod|android/',strtolower($_SERVER['HTTP_USER_AGENT']))) 

你可以使用谷歌新的渐进networking应用程序添加服务工作者来实现这一点。 看看这里: https : //addyosmani.com/blog/getting-started-with-progressive-web-apps/和https://developers.google.com/web/progressive-web-apps/

您可以在主屏幕上为您的webapp添加图标,获得全屏,可以使用推送通知等。

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

此标签旨在显示一个无铬环境后,您的网站添加到iPhone的主屏幕。

我不会依靠这个为Android工作。

为了使浏览器栏滚动一旦你的网页已经加载看到这个问题的答案: 从浏览器中删除地址栏(Android上查看)

如Google所示

自Chrome M31以来,您可以设置您的networking应用程序,将应用程序快捷方式图标添加到设备的主屏幕,并使用Chrome浏览器的“添加到主屏幕”菜单项以全屏“应用程序模式”启动应用程序。

请参阅https://developer.chrome.com/multidevice/android/installtohomescreen

这个代码可能有帮助…

 public void onCreate(Bundle savedInstanceState) { requestWindowFeature(Window.FEATURE_NO_TITLE); --> hide the Top Android Bar. super.onCreate(savedInstanceState); setContentView(R.layout.main); 

从Android侧和低于蜂窝版本 ,这应该使用:

 Window w = getWindow(); w.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); w.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); 

如果Android浏览器在读取元信息时没有这样做,我会尝试查看phonegap以检查他们是否解决了这个问题。