Question

我在http://www.sencha.com/learn/hello-world/尝试了一个简单的hello world示例，并在浏览器中运行它。看起来不错......但是在两台Android设备上，我在网站顶部获得了一些空间，这样第一行就不会显示了...发生了什么？

必须有三个Hello Worlds ......但是第一个在标题栏后面丢失了..我检查了一个简单的按钮并且效果相同，按钮将显示为一半。

<!DOCTYPE html> <html> 
<head> 
    <meta charset="utf-8"> 
    <title>Hello World</title> 

    <script type="text/javascript" charset="utf-8" src="st2/sencha-touch-all-debug.js"></script>
    <link id="0" type="text/css" rel="stylesheet" href="st2/resources/css/sencha-touch.css" /> 

    <script type="text/javascript"> 

        Ext.application({
            launch: function () {
                Ext.create('Ext.Panel', {
                    fullscreen: true,
                    html: 'Hello World!<br/>Hello WOrld2<br/>Hello WOrld 3'
                });
            }
        });

    </script> 

</head> 
<body></body>

Screenshot

Answer 1

我从android清单上的应用程序标签中删除了主题，现在可以正常工作了。似乎是一个Android问题..

    android:allowBackup="true"

    android:icon="@drawable/icon"

    android:label="@string/app_name"

    android:theme="@style/AppTheme" <!-- Removed this line -->

    android:hardwareAccelerated="true"

    >

Answer 2

有时某些浏览器在显示全屏页面时出现问题。尝试添加：

viewport: {
    autoMaximize: true
}

在启动方法之前

到Ext.Application对象。但在http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Viewport-cfg-autoMaximize

仔细阅读Sencha关于此设置的警告

位于简单网站顶部的空间

2 个答案: