Sencha Touch示例应用程序无法在Android上全屏运行?

时间:2013-08-08 09:40:20

标签: javascript android html5 sencha-touch-2 fullscreen

RE:Sencha Kitchen Sink示例,可在此处找到:http://cdn.sencha.io/touch/sencha-touch-2.2.0/examples/kitchensink/index.html

在我的iPhone上,如果我在Safari中打开厨房水槽示例,添加到主屏幕,然后按下新的“厨房水槽”主屏幕图标,在Web应用程序出现之前会出现一个Sencha徽标,填满整个屏幕。底部没有地址栏,也没有浏览器控件。

我似乎无法在Android上复制此内容。

我的Android平板电脑正在运行4.1.1,使用默认浏览器和Chrome 28进行了测试。我尝试的过程是添加书签,然后转到书签,按住书签并选择添加快捷方式回家。当我按下主屏幕图标时,实际图标本身会正确显示(蓝色水槽的图片)但是按下它只会在浏览器选项卡中打开正常的网站。

Q1:为什么Android设备之间存在这种差异,似乎有相同的浏览器和操作系统版本......这是Apple功能在某些Android设备上偶然发生的,或者是它Sencha有问题吗?

Q2:厨房水槽应用是否可以在Android上以全屏模式运行,如果是这样,我怎样才能让它在我的设备上运行?

注意:真正的问题是,我自己拥有自己的基于Sencha Touch的网络应用程序,在iOS上全屏但不在Android上,但因为Sencha自己的厨房水槽应用程序不起作用我觉得最好先看一下。因此,如果有任何代码破解我可以做到不会破坏Sencha,但是会使全屏工作,它们也是可取的。

之前的研究:

这里有一个类似的问题,但这对我没有任何意义:can not full screen panel on android device use sencha touch 2.0 RC

这个问题和答案似乎表明Android上的Sencha应用程序全屏显然是可能的:how to fullscreen a Sencha Touch 2 page on a WebKit browser?

这里有一个帖子,但它似乎没有任何明确的解决方案就结束了? http://www.sencha.com/forum/showthread.php?179678-None-of-the-example-apps-are-full-screen-anymore

这似乎表明它之前被破坏但现在已修复:http://www.sencha.com/forum/showthread.php?176479-PR4-fullscreen-isn-t-full-screen-on-Android

这似乎暗示我可能需要破解我自己的代码,但我已经测试了Android上的O'Reilly示例,它的行为与厨房接收器示例相同,它仍然没有全屏显示:{{3 }}

更新:一位同事在Galaxy S上对其进行了测试,并在该设备上全屏运行。它运行的是比平板电脑更旧的Android版本。

更新2:经过进一步测试后,目前仅适用于1/5设备。

这里有一个讨论,但不清楚Sencha是否认为它是一个bug,知道官方的界限是好的:http://www.sencha.com/forum/showthread.php?192525-SOme-issues-Android-address-bar-Offline-mode

有一些Javascript解决方法,我可以调查,但同样,这不应该与Sencha开箱即用吗? http://www.sencha.com/forum/showthread.php?117851-Hiding-address-bar-on-Android

更新3:测试了一些JavaScript hackery。这里的解决方案:http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/不起作用,即使页面完全是内容(因此可滚动) - 我认为这是因为整个视口不可滚动,只是其中的面板。

此处的解决方案:https://stackoverflow.com/a/4203871/1061602也不适用于Sencha Touch,它似乎隐藏了底部导航栏。可能有办法解决这个问题,但我还没有调查过

更新4 :关注文章:https://stackoverflow.com/a/9100406/1061602并尝试实施此要点:http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ - 仍然没有快乐

1 个答案:

答案 0 :(得分:0)

不幸的是,我在Sencha论坛上也没有得到任何回复,完全回答了这个问题。

默认情况下,

autoMaximize设置为false:http://docs.sencha.com/touch/2.0.2/#!/api/Ext.viewport.Default-cfg-autoMaximize

  

autoMaximize:Boolean   是否始终在第一次加载时自动最大化视口以及所有后续方向更改。

     

默认设置为false,原因有很多:

     

在所有设备上启用此功能后,方向更改性能会大幅降低。   在某些设备(主要是Android)上,当更改默认浏览器缩放设置时,这有时会导致问题。   将手机包装在本机shell中时,可能会出现空白屏幕。   书签到主屏幕(iOS)时,您可能会出现一个空白屏幕。   默认为:false

     

自:2.0.0起可用

看起来(来自这里的评论:https://stackoverflow.com/a/10318762/1061602)和Sencha论坛的其他地方,由于这些相关问题,无论如何都不支持autoMaximize功能。

我走了一条不同的路线,作为一种解决方法,对用户而言并不出色,但至少是可以预测的。

对于iOS设备,Sencha autoMaximise设置正常,它会添加所需的<meta>标记,以使网站作为网络应用运行。

对于Android设备,解决方法是安装Dolphin浏览器:https://play.google.com/store/apps/details?id=mobi.mgeek.TunnyBrowser&hl=en,其中包含全屏添加。从这里我可以在主屏幕上添加一个书签,它将全屏启动。注意:如果您在Sencha网站本身启用全屏添加,它对我来说无法正常工作,导航栏会在屏幕上向上显示。如果您在另一个站点上启用全屏添加,则导航到Sencha站点,它可以正常工作。

在此之前,我尝试过Firefox(其中有一个全屏添加,但Sencha Touch无法在Firefox上运行)和另一个全屏浏览器(https://play.google.com/store/apps/details?id=com.browser.sogood.ui&hl=en,这只是有点邋,,而无法制作主屏幕快捷方式)。 Chrome Beta和Chrome 28在滚动时具有全屏,但目前不支持扩展程序或全屏设置。据我所知,默认的Android浏览器在4.3以上的标签下也有一个全屏选项,但我目前只停留在4.1.1上,默认的Android浏览器可能是将来购买硬件时的最佳选择。

<强>更新

简短更新,因为这有很多观点,我可以确认Android上的Chrome测试版现在可以满足全屏要求,因此不需要Dolphin。