android - IBM Worklight - 应用程序在不同的 Android 操作系统版本中显示和行为不同

Question

我正在使用 Android 环境创建一个基于 Worklight 的混合应用程序。

我有两个问题:

1. 智能手机和平板电脑中的键盘；一旦它消失，就会有一些延迟，直到它真正消失 - 有一些白色背景......

   全尺寸图片:http://www.tiikoni.com/tis/view/?id=fe716e8

2. 即使 CSS 相同，文本输入字段的边框在每个设备上看起来也不同。

   全尺寸图片:http://www.tiikoni.com/tis/view/?id=a7333a7

源代码 fragment :

• Login.html:http://www.pastebin.com/3h5i7179
• Login.css:http://www.pastebin.com/R5RajiXD

Answer 1

关于问题#1:

我在以下位置运行了我的测试应用程序:

• Google Nexus "5 (Android 4.4), Google Nexus "10 (Android 4.3)

  在这些设备中，我无法重新创建“延迟的白色残留物”(通过显示键盘然后将其滑下)

• Samsung Galaxy Tab 1 "7 (Android 2.2)，Android 模拟器(2.x、4.x)

  在这些设备中，我设法重新创建了它

IMO 这个问题似乎是由于设备规范而发生的。你的速度可能太慢了……用户将需要忍受 1 秒左右的时间，直到重新绘制白色区域。

关于问题 #2:

1. 要禁用围绕输入字段的焦点环，请将以下内容添加到 input CSS:
   

   /* Deals with Android 4.x */
   outline: none;
   
   /* Deals with Android 2.x */
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some other Androids */
   

2. 为了在 Android OS 2.x 和 4.x 中显示相同的绿色输入字段，我在 input CSS 中添加了以下内容:
   

   background-color: #00CD9A;

   注意:在 Android 2.x 中，操作系统在密码类型输入字段之上添加了一个层，因此这些在获得焦点时将失去其样式:Input has different style on focus

input 的完整 CSS:

input {
    -webkit-border-radius:8px;     
    font-size: 30px;
    font-family: calibri, sans-serif;

    /* Idan: To remove the focus rings: */
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;

    /* Idan: Background color for the input fields: */
    background-color: #00CD9A; 
}