堆棧內存溢出
  簡體   English   中英

Android 2.x和3.x WebKit混亂

[英]Android 2.x and 3.x WebKit mess

 原文  2013-01-19 16:30:43  5   1    javascript/ android/ jquery/ html/ css

問題描述

我正在開發一個Android應用程序，我的意圖是至少能夠在Android 2.2+上發布該應用程序。 目前，由於WebView控件混亂，我只能使用Android 4.0以上版本。
該應用程序主要基於HTML + CSS + JS + jQuery。

div.appList顯示應用程序列表，單擊該應用程序應啟動。 只是有一些麻煩。 為了使列表可滾動，我必須添加overflow: scroll; 給它的父母。 在Android 3.0以上版本中可以正常工作。 在Android 2.x中，列表仍然無法滾動。
我說過，它在Android 3.0中工作正常？ 好吧，滾動確實可以。 現在的問題是它沒有注冊點擊。 如果用戶點擊列表中的一個項目，則不會觸發click事件，因為，我猜是因為用戶在列表中滾動時會注冊它。 再次使列表不可滾動，使這些項目變為可單擊狀態，但是再次，該列表無用，因為您只能訪問前幾個項目。

在Android 4.0+上一切正常

任何幫助將不勝感激。

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 

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的 

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);
}

任何能幫助我使其在較舊版本上運行的功能均受到贊賞。 我們的目標是Android 2.x，但是如果您可以幫助我使其在3.2+上運行，我已經非常高興。

1 個解決方案

解決方案1
 1 已采納  2013-01-21 17:57:34

overflow:scroll|auto在Android 2.X設備上無法正常工作。 此CSS規則等於overflow:hidden :)

您無法修復它，但可以使用插件來避免此行為，例如http://cubiq.org/iscroll-4

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶有 Django 2.x 或 3.x 的 Django FullCalendar Android 2.X上的數字9 Openlayer 2.x集群 jQuery 3.x中的bind（） 蓋茨比 3.X + Netlify Plupload在Android 2.x上使用錯誤的MIME發送數據 Android 2.X HTML5視頻結束全屏 Android 3.x僅限WebView文本選擇+ JavaScript Android webview + javascript在android 4.0.x，3.x中沒有顯示輸出 從Webpack 1.x遷移到2.x.
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM