2014-09-11 18 views
2

我在我目前的项目在TITANIUM这个意想不到的问题。 我正在使用webview来显示本地html文件。它在iOS以及某些android设备中工作得很好。但在大多数高清Android设备中,滚动时html页面或webview的内容会中断。这里是我的代码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

回答

2

好了,现在我知道这是不是一个理想的解决方案,但如果你是一个钛开发人员,你必须应对每天这种情况下,特别是对于我们的敌人的朋友Android系统。 因此,作为一项工作,我已经做了第一次webview加载后第二次重新加载webview的html。

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

}); 

这是怎么一回事,因为在我的HTML文件我已成立 <阶name =“视口”内容=“宽度=设备宽度,初始规模= 0.9,用户可扩展=无”/>

但不幸的是它没有被采用,因此在滚动时会显示一些有问题的用户界面。在解决这个问题之后,似乎meta标签就起作用了。希望它能帮助那些遇到过这样的事情的人。