Webview scalesPageToFit not working (Android)
var webview = Titanium.UI.createWebView({
url:'index.htm',
scalesPageToFit:true,
contentWidth:'auto',
contentHeight:'auto'
});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open({modal:true});
My index.htm page (or any other URL I try) loads at fullres and absolutely refuses to fit the screen onLoad. I am extremely confused and cannot find anyone experiencing this issue. I have also tried adding this meta tag:
meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport"
…but still the same results. From what I have read online and in other forums this is exactly the code that is used to scale the page to the screen, but for whatever reason it simply wont work.
Has anyone else experienced this? Am I missing some crucial snippet of code somewhere to get this working? So confused…
7 Answers
-
i have solution Prevent zoom and still fit in screen .
1 - set your html cod in div .
2- set style for this div and set zoom 50% .
'<div style="font-size: 25pt; zoom: 50%; " >' + your html code + '</div>';3 - put meta tag in head ( before div ).
<meta name = "viewport" content = "user-scalable = no">4 - set
scalesPageToFit:true,.This works fine for me on Android.
I hope to be helpful to you .
-
hey Luke, I'm experiencing the same issue. Its hard trying to find help here.
-
scalesPageToFit is not supported on Android at this time. I'm looking for a workaround as well and will post here if I find one.
-
I just confirmed that it is fixed in the latest build of 1.7: http://builds.appcelerator.com.s3.amazonaws.com/index.html – choose the master branch from the dropdown and download the latest 1.7 sdk.
-
I created a work around. Put the following line in your "load" event listener of webView. Let me know if this works or not.
webView.evalJS("var m=document.createElement(\"meta\");m.name = \"viewport\";m.content = \"width=320, initial-scale=1, maximum-scale=1, minimum-scale=1\";document.getElementsByTagName(\"head\")[0].appendChild(m);"); -
I have created a web view like:
var webView = Ti.UI.createWebView({
url : 'listing.html'
});
and in my listing.html i have simply put this
<head>
<meta name = "viewport" content = "user-scalable = no"> </head>
and it is working fine for me!!!! -
This works fine for me on Android.
webview = Ti.UI.createWebView({ height:Ti.UI.SIZE, width:Ti.UI.SIZE ...So I went with the ugly if else.. hope it helps someone
if (isAndroid) { webview4 = Ti.UI.createWebView({ height:Ti.UI.SIZE, width:Ti.UI.SIZE}); } else { webview4 = Ti.UI.createWebView({ scalesPageToFit:true contentWidth:'auto', contentHeight:'auto', }); }