android - 滚动时 webview 内容在 titanium android 中中断/扭曲

Question

我在 TITANIUM 中的当前项目中遇到了这个意外问题。我正在使用 webview 显示本地 html 文件。它在 iOS 和某些 Android 设备中也能完美运行。但是在大多数高清 android 设备中，html 页面或 webview 的内容在滚动时会中断。这是我的代码

var htmlTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras',     'learnMore.html');
    var cssTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras',    'learnMore.css');![enter image description here][1]
var html = htmlTemplate.read().text;
var css = cssTemplate.read().text;

html = html.replace("#css#", css);
//Animations Transformations
var small = Ti.UI.create2DMatrix({
    scale : 0.05
});
var big = Ti.UI.create2DMatrix({
    scale : 1.2
});
var normal = Ti.UI.create2DMatrix({
    scale : 1
});
//Animation Durations
var smallDuration = 350;
var bigDuration = 350;
var normalDuration = 250;
var win = Ti.UI.createWindow({
    backgroundColor : 'transparent',
    //navBarHidden : true,
});
var windowView = Ti.UI.createView({
    top : OS_IOS ? 20 : 1,
    right : 1,
    bottom : OS_IOS ? 10 : 1,
    left : 1,
    backgroundColor : '#fff',
    borderRadius : 7,
});
var closeImage = Ti.UI.createImageView({
    zIndex : 1,
    top : 5,
    right : 1,
    width : 35,
    height : 35,
    image : "/images/icons/black_cross_icon.png"
});
closeImage.addEventListener('click', closeWindow);

var webView = Ti.UI.createWebView({
    width : '100%',
    height : Ti.UI.SIZE,
    backgroundColor : "transparent",
    top : 0,
    html : html,
    //overScrollMode : Titanium.UI.Android.OVER_SCROLL_NEVER,

});
windowView.add(webView);
win.add(windowView);
win.add(closeImage);
function closeWindow() {
    if (OS_ANDROID) {
        win.close();
        return;
    }
    win.animate({
        duration : 300,
        transform : big
    }, function() {
        win.animate({
            duration : smallDuration,
            transform : small
        }, function() {
            win.close();
            webView = null;
        });
    });
}

(function() {
    win.open();
    if (OS_ANDROID) {
        return;
    }
    win.transform = small;
    win.animate({
        duration : bigDuration,
        transform : big
    }, function() {
        win.animate({
            duration : normalDuration,
            transform : normal
        });
    });
})();

win.addEventListener('open', function(e) {
    Ti.API.error('********************* Learnmore OPEN ***********************');
    if (OS_ANDROID) {
        win.activity.actionBar.hide();
    }
});

https://www.dropbox.com/s/ade8wssi5ima3gr/10671472_702509996463626_2272456868867723707_n.jpg?dl=0

Answer 1

好吧，现在我知道这不是一个理想的解决方案，但如果你是钛开发者，你必须每天处理这种情况，特别是对于我们的敌友 Android。因此，作为解决方法，我所做的是在第一次加载 webview 后第二次重新加载 webview 的 html。

var toggle = false;
webView.addEventListener('load', function(e) {
    if (toggle == false && OS_ANDROID) {
        this.html = html;
        toggle = true;
    }

});

这是因为在我设置的 html 文件中<meta name="viewport"content="width=device-width, initial-scale=0.9,user-scalable = no"/>

但不幸的是，它有一段时间没有生效，因此在滚动时它显示了一些有问题的 UI。在解决之后，meta 标记似乎起作用了。希望它能帮助遇到这样事情的人。