How can you make Titanium iPad webviews smaller than device width? - titanium

Question

I am trying to load external webpages into a webview that is smaller than the device. This is an example:
var window = Titanium.UI.createWindow();
var webview = Titanium.UI.createWebView();
webview.setWidth(320)
webview.setUrl('http://www.bostonglobe.com')
Ti.API.info('webview width = ' + webview.width);
window.add(webview);
window.open();
You can see the webview scrolls horizontally, acting like a its the same width of the device, not 320 as specified.
Any help to make this work would be appreciated.

Answer 1

This is actually very easy to do and is built in to Titanium for all platforms. Just use the scalesPageToFit property of the WebView, this has been around since Titanium version 0.8 so its quite stable.
var self = Ti.UI.createView({
backgroundColor : '#ff0000'
});
var webView = Ti.UI.createWebView({
url : 'http://whatsmy.browsersize.com',
scalesPageToFit : true,
width : 280
});
self.add(webView);
Note the platform difference though:
"On iOS, setting this to true sets the initial zoom level to show the entire page, and enables the user to zoom the web view in and out. Setting this to false prevents the user from zooming the web view."
"On Android, only controls the initial zoom level."
Also note that their is a difference between pixels, and points, as every screen has different pixel density. Here is a screenshot showing this works, note the surrounding red background:
Thise screenshot was taken from a vanilla project using the "Default Window" template from Titanium Studio. All I did was replace the "ui/common/FirstView.js" file with this gist.
It is possible if you make your WebView very small that it wont show the content (as many websites specify a minimum zoom scale) so in that instance I would suggest using a transform like this:
var webView = Ti.UI.createWebView({
url : 'http://whatsmy.browsersize.com',
scalesPageToFit : true,
width : 280,
transform : Ti.UI.create2DMatrix().scale(0.5, 0.5)
});
All this does is take the previous view and half-size it.
Of course, you will have to calculate your own uniform scaling factor, but that should be straightforward depending on your requirements and platform target. Here is a screenshot of the scaled result.
Using a combination of these methods you definitely have the tools needed to solve this problem. Good luck!

Answer 2

try doing it this way instead and see if you get better results:
var webview = Titanium.UI.createWebView({
width:320,
url:'http://bostonglobe.com'
});

Answer 3

Another point to consider is that the page you're loading probably isn't mobile friendly. Apple's web view control is deciding to show it at a scaled rate to make it fit. In the case of whatsmy.browsersize.com, it's telling you the scaled size of the web page, not the control size of the web view.
You most likely want to change the width and initial scale of the web page's viewport.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0;" />
EDIT: For third party sites, after the page loads, you can force it to scale via JavaScript. If you don't want to see the initial unscaled page, hide the web view until has scaled down.
webView.evalJS('document.body.style.zoom = 1.5;');