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/ - 仍然没有快乐
答案 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。