Android 2.x和3.x WebKit混乱
[英]Android 2.x and 3.x WebKit mess
问题描述
I'm developing an Android app, and my intention is to be able to publish it for Android 2.2+ at least. 
我正在开发一个Android应用程序，我的意图是至少能够在Android 2.2+上发布该应用程序。 Currently, I'm limited to Android 4.0+ because of the WebView control being a mess. 目前，由于WebView控件混乱，我只能使用Android 4.0以上版本。
The app is largely HTML+CSS+JS+jQuery based. 该应用程序主要基于HTML + CSS + JS + jQuery。
div.appList shows a list of apps, and when clicked the app should launch. div.appList显示应用程序列表，单击该应用程序应启动。 Only there's some trouble with this; 只是有一些麻烦。 For the list to be scrollable, I have to add overflow: scroll; 为了使列表可滚动，我必须添加overflow: scroll; to its parent. 给它的父母。 This works fine in Android 3.0+. 在Android 3.0以上版本中可以正常工作。 In Android 2.x the list is still not scrollable. 在Android 2.x中，列表仍然无法滚动。
I said it worked fine in Android 3.0? 我说过，它在Android 3.0中工作正常？ Well, the scrolling does. 好吧，滚动确实可以。 Now the problem is that it doesn't register clicks. 现在的问题是它没有注册点击。 If the user taps an item in the list, the click event simply doesn't get triggered, because, I'm guessing, it's registered as the user scrolling through the list. 如果用户点击列表中的一个项目，则不会触发click事件，因为，我猜是因为用户在列表中滚动时会注册它。 Making the list unscrollable again makes the items clickable, but then again, the list is useless because you can only access the top few items. 再次使列表不可滚动，使这些项目变为可单击状态，但是再次，该列表无用，因为您只能访问前几个项目。
Everything works fine in Android 4.0+ 在Android 4.0+上一切正常
Any help would be hugely appreciated. 任何帮助将不胜感激。
HTML HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="loadingScreen">
</div>
<div id="desktop">
<div class="unity panel">
</div>
<div class="unity launcher">
<div class="launcherIcon bfb">
<img src="img/unity/launcher.bfb.png" alt="Dash Home" />
</div>
<div class="launcherApps iScroll" id="launcherApps">
</div>
<div class="launcherIcon launchTrash">
<img src="img/apps/trash.icon.png" alt="Rubbish Bin" />
</div>
</div>
<div class="window">
<div class="windowClose">
</div>
<div class="windowContent">
<div class="windowPreferences">
<p>Nothing to be seen here, yet</p>
</div>
</div>
</div>
<div class="unity dash">
<div class="dashContent">
<div class="dashApps dashPage iScroll" id="dashApps">
<div class="appList"></div>
</div>
<div class="dashFiles dashPage iScroll" id="dashFiles">
<div class="fileList"></div>
</div>
</div>
<div class="dashRibbon">
<img src="img/unity/apps.png" alt="Applications" class="activeRibbonItem ribbonApps" />
<!--<img src="img/unity/files.png" alt="Files" class="ribbonFiles" />-->
</div>
</div>
</div>
</body>
</html>
CSS CSS
html, body
{
font-family: 'Ubuntu', 'Droid Sans';
margin: 0px;
padding: 0px;
overflow: hidden;
background: rgb(43,0,30);
}
/*# Loading screen #*/
div#loadingScreen
{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
text-align: center;
background: rgb(43,0,30) url(img/ubuntuLogo.png) center center no-repeat;
color: white;
z-index: 49;
}
/*# Desktop #*/
div#desktop
{
display: none;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgb(43,0,30) url(img/wallpaper/wartyFinal.jpg);
background-position: center center;
background-size: cover;
}
div.unity.panel
{
display: none;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 24px;
background: rgb(69,68,64) url(img/unity/panel.background.jpg);
background-repeat: repeat-x;
}
div.unity.panel.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
border-bottom: 1px solid #504E4F;
}
div.unity.launcher
{
display: none;
position: absolute;
top: 24px;
left: 0px;
bottom: 0px;
width: 0px; /* Animates to 64px */
background: transparent url(img/unity/launcher.background.png);
border-right: 1px solid #504E4F;
padding: 3px 0px 55px 0px;
}
div.unity.launcher.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
}
div.launcherIcon
{
display: none;
width: 52px;
height: 52px;
margin: 4px 6px 4px 6px;
border-radius: 5px;
background: transparent url(img/unity/launcher.iconbg.png);
background-position: center;
background-size: cover;
}
div.unity.launcherIcon.dashOpened
{
background: grey !important;
opacity: 0.8;
}
div.launcherIcon.bfb
{
background-image: none;
border-radius: 0px;
}
div.launcherIcon.bfb img
{
width: 52px;
height: 52px;
margin: 0px;
}
div.launcherIcon img
{
width: 46px;
height: 46px;
margin: 3px;
}
div.launcherIcon.launchFirefox
{
background-color: rgb(247,192,48);
}
div.launcherIcon.launchTrash
{
position: absolute;
bottom: 3px;
background-color: #303030;
}
div.window
{
display: none;
position: absolute;
top: 24px;
left: 64px;
right: 0px;
bottom: 0px;
background: rgb(242,241,239);
color: black;
}
div.windowClose
{
position: fixed;
left: 0px;
top: 0px;
width: 64px;
height: 24px;
text-align: center;
background: url(img/window/close.png) center center no-repeat;
}
div.dash
{
display: none;
position: absolute;
left: 64px;
top: 24px;
bottom: 0px;
right: 0px;
background: transparent url(img/unity/dashOpened.png);
padding: 0px 12px 48px 12px;
color: white;
overflow: scroll;
}
div.dash.dashOpened
{
display: block;
}
div.dash *:link
{
color: white;
text-decoration: none;
text-shadow: 0px 0px 2px white;
}
div.dash ul li
{
padding: 5px;
}
/*# Applications #*/
div.appWindow
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
JavaScript JavaScript的
var bootscreenDelay = 500; // 2500 //
var appOpened = false;
var dashOpened = false;
$(document).ready
(
function ()
{
$('div#loadingScreen').delay (bootscreenDelay).fadeOut (800);
$('div#desktop').delay (bootscreenDelay + 300).fadeIn (600,
function ()
{
$('div.unity.panel').slideDown (400,
function ()
{
$('div.unity.launcher').css ('display', 'block').animate ( { width: 64 }, 600,
function ()
{
$('div.launcherIcon').each
(
function (i)
{
$(this).delay (i * 200).slideDown (400);
}
);
}
);
}
);
}
);
$('div.windowClose').click
(
function ()
{
$('div.appFirefox .appFirefoxBrowser').fadeOut (400,
function ()
{
appFirefoxNavigate ('http://start.ubuntu.com/');
}
);
$('div.appWindow.appFirefox').fadeOut (800);
$('div.window').delay (200).fadeOut (800);
appOpened = false;
}
);
/*# Dash #*/
$('div.launcherIcon.bfb').click
(
function ()
{
if (! dashOpened)
openDash ();
else
closeDash ();
}
);
/*# Trash #*/
$('div.launcherIcon.launchTrash').click
(
function ()
{
closeEverything ();
android.openInBrowser ('http://www.dafk.net/what/');
}
);
}
);
function closeEverything ()
{
$('div.windowClose').trigger ('click');
closeDash ();
}
function openDash ()
{
$('*').addClass ('dashOpened');
dashOpened = true;
var appList = android.getApplicationList ();
var pkgMan = android.getPackageManager ();
var strAppList = '<ul>';
for (var i = 0; i < appList.size (); i++)
{
var appLabel = android.getApplicationLabel (appList.get (i));
strAppList += '<li onclick="launchApp (' + i + ')">' + appLabel + '</li>';
}
strAppList += '</ul>';
$('div.appList').html (strAppList);
}
function closeDash ()
{
$('*').removeClass ('dashOpened');
dashOpened = false;
}
function launchApp (i)
{
android.launchAppFromList (i);
}
Anything that helps me get it working on an older version is appreciated. 任何能帮助我使其在较旧版本上运行的功能均受到赞赏。 The goal is Android 2.x, but if you can help me make it work on 3.2+, I'm already very happy. 我们的目标是Android 2.x，但是如果您可以帮助我使其在3.2+上运行，我已经非常高兴。
1 个解决方案
解决方案1
1 已采纳 2013-01-21 17:57:34
overflow:scroll|auto dowsn't work properly on Android 2.X devices. overflow:scroll|auto在Android 2.X设备上无法正常工作。 This css rule equals to overflow:hidden :) 此CSS规则等于overflow:hidden :)
You can't fix it but you can use plugins to avoid this behaviour eg http://cubiq.org/iscroll-4 您无法修复它，但可以使用插件来避免此行为，例如http://cubiq.org/iscroll-4
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.