2011-09-22 72 views
36

我想在Android上以全屏模式运行我的Web应用程序,该应用程序使用HTML5进行编程。 (隐藏状态栏,和ADRESS /导航栏)适用于Android的全屏Web应用程序

为iOS你只写:

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

但是,这并没有在Android上工作。

Javascript有很多解决方案,但我试过的所有解决方案都不起作用。

有人知道解决方案吗?

回答

3

我不认为你会找到一个全球性的解决方案,因为不是每个人都使用默认的android webbrowser(例如我更喜欢海豚)。

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

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

+0

好... 但对默认的Android网页浏览器? 这是如何工作的? – user959456

+0

说实话,我从来没有尝试过,而且必须研究。我看到类似于“让页面滚动一个像素,然后它消失” – Knickedi

+0

嗯... okey ...我进一步研究... :( 谢谢 – user959456

-9

从Android侧和比蜂窝更低的版本,这应该用做:

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

如果Android浏览器不会做这样的事情时,它读取元信息,我会试试看phonegap来检查他们是否解决了这个问题。

+5

这是一个WEB应用程序(HTML5) 非本机应用程序 – user959456

+0

@ user959456:Plz,阅读我的完整答案,该行是浏览器在读取元数据时应该执行的操作如果默认浏览器没有执行我建议你检查一下phonegap是否解决了这个问题 – Macarse

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

该标签旨在在将您的网站添加到iPhone的主屏幕后显示无铬环境。

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

为了使浏览器栏滚动的方式进行,一旦你的页面加载看到这个问题的回答是: Removing address bar from browser (to view on Android)

+1

这个在android中完美的工作,但我建议使用一个清单(它提供了更多的自定义选项)http://updates.html5rocks.com/2014/11/Support- for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android –

-8

此代码可以帮助...

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

请参阅下面的帖子,它不是关于本机应用程序! – theomega

+1

@ user1.251064虽然downv otes建议不受欢迎,他们没有给出任何线索,为什么......所以:也许“网络应用程序”(在浏览器中运行)和“本地应用程序”(通常从应用程序商店中获得)之间存在混淆。 Web Apps使用HTML/HTML5和CSS和Javascript ...但不包括任何形式的Java(至少不是99%的时间:-)。 Web Apps无法直接访问本机SDK。一个好的经验法则是,如果它在Java中,它只与本地应用程序不相关,不适用于Web应用程序。 –

9

我用的混合适用于iOS的HTML元标记和JavaScript解决方案。 它带走了iOS和Android设备上的地址栏。它不会取出iOS上的底部栏,因为只有当用户在他的主屏幕上将网页作为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']))) 
+0

这适用于Android平板电脑吗?我尝试过的代码,但它不工作形式me.I在设备三星平板电脑安卓4.0.4版本中使用铬浏览器。 – sureshunivers

+0

我从来没有尝试过,因为我没有一个 – philipp

+0

它没有为我的android 4.4.4在铬或firefox中工作。 – ton

20

这为我工作在Android版Chrome。

它添加到head标签:

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

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

+0

这是很好的解决方案。这样用户就有了类似应用程序的环境。但更好的是,如果有谷歌播放的方式来做到这一点。 – ton

+0

通知栏有,但地址栏去了这个 –

+0

完美的,我需要做的,没有任何hacky黑客! –