2014-09-11 19 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標籤就起作用了。希望它能幫助那些遇到過這樣的事情的人。