Appcelerator Titanium(Android) webview's extra space

Question

I am relatively new to titanium. I am loading my local html/xml in webview. In iOS everything is handled automatically(showing content) but when I check this in android content in webview has extra spaces also content is shown with jump and bounce which is never acceptable. I am using alloy structure. when I statically add meta tag(viewport) in my local file, then white space is gone. But I require to load local files dynamically so I can't edit my local files. So editing these files I override load method of webview like this :-

$.webview.addEventListener('load', function(e) { $.webview.evalJS("var m=document.createElement(\"meta\");m.name = \"viewport\";m.content = \"width=" + scrwidth + ", user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1\";document.getElementsByTagName(\"head\")[0].appendChild(m);"); });

But it does not affect html of webview. For confirming this I write one file after evalJS so I can be sure that evalJS is affecting.

var jsString = 'var s=document.createElement("script");' + 's.innerHTML="' + 'sdfsdfsdfsd' + '";' + 'document.getElementsByTagName("head")[0].appendChild(s);'; $.webview.evalJS(jsString);

var resFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, "response.html"); resFile.write($.webview.html);

Now when I check this file in application data directory I can see this effect for iOS(it shows only content of my local html) but for android I cant see my added script. When I check response file it starts with javascrit which I cant understand from where it comes(I think its from native webview's html) and after its script is ended I see my html but not the script which I added manually in load. I read about this problem but all has given viewport meta tag solution but in my case No matter how much I am trying I am unable to fit content. So can you guys tell me where I am going wrong? Is there any special permission to edit html of webview in android(because its not editing).

Application type :- mobile Titanium SDK :- 3.0.2 Platform & version :- Android 2.2 Device :- htc Nexus/ mototrola zoom Host operating system :- Mac OS 10.8.2 Titanium Studio :- 3.0

Thanks.

Answer 1

You need the viewport meta tag for mobile devices:

<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1">

Answer 2

Thanks for your answer but as I have said that wherever I tried to find this questions answer I found the same answers as you mentioned(so definitely your answer is correct) but I have mentioned above that I cant add this line manually because I do not have control over these files so this will not work for me anymore.

I also shown that how I am dynamically adding meta tag above but that also did not work.

So now what I did is I took handle of file where html is saved and then replace </head> tag with <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1"></head> and then saved this file to its own location. Now when file is successfully write I then access it using webview.url = file.nativepath. :) and now everything is working fine.

May be this is useful for someone who is trying same like me. Here process will be slow because I am accessing file editing file and then again access this file but this is at least working. If some one has more accurate or sensible answer they can answer here thanks.