如何使Titanium iPad webviews小于设备宽度?

时间:2012-10-04 05:16:24

标签: titanium

我正在尝试将外部网页加载到小于设备的网页浏览中。这是一个例子:

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(); 

您可以看到webview水平滚动,就像设备的宽度相同,而不是指定的320.

任何帮助完成这项工作都将不胜感激。

3 个答案:

答案 0 :(得分:2)

这实际上非常容易实现,并且内置于所有平台的Titanium中。只需使用WebView的scalesPageToFit属性,自Titanium 0.8版本以来就已存在,因此它非常稳定。

var self = Ti.UI.createView({
    backgroundColor : '#ff0000'
});

var webView = Ti.UI.createWebView({
    url : 'http://whatsmy.browsersize.com',
    scalesPageToFit : true,
    width : 280
});

self.add(webView);

请注意平台差异:

“在iOS上,将此设置为true会将初始缩放级别设置为显示整个页面,并使用户可以放大和缩小Web视图。将此设置为false可防止用户缩放Web视图。”< / p>

“在Android上,只控制初始缩放级别。”

另请注意,它们是像素和点之间的差异,因为每个屏幕都有不同的像素密度。以下是显示此作品的屏幕截图,请注意周围的红色背景: This works

这个截图是使用Titanium Studio的“默认窗口”模板从一个vanilla项目中截取的。我所做的就是替换“ui / common / FirstView.js”文件with this gist.

如果你使你的WebView非常小,它不会显示内容(因为许多网站指定了最小缩放比例),所以在这种情况下,我建议使用这样的转换:

var webView = Ti.UI.createWebView({
    url : 'http://whatsmy.browsersize.com',
    scalesPageToFit : true,
    width : 280,
    transform : Ti.UI.create2DMatrix().scale(0.5, 0.5)
});

所有这一切都取得了前一个视图和半尺寸。 当然,您必须计算自己的统一缩放因子,但这应该是直截了当的,具体取决于您的要求和平台目标。以下是缩放结果的屏幕截图。

This works too

使用这些方法的组合,您肯定拥有解决此问题所需的工具。祝你好运!

答案 1 :(得分:1)

尝试这样做,看看你是否得到了更好的结果:

var webview = Titanium.UI.createWebView({
    width:320,
    url:'http://bostonglobe.com'
});

答案 2 :(得分:1)

要考虑的另一点是,您加载的页面可能不适合移动设备。 Apple的Web视图控件决定以缩放比率显示它以使其适合。在whatsmy.browsersize.com的情况下,它会告诉您网页的缩放大小,而不是网页视图的控件大小。

您最有可能想要更改网页视口的宽度和初始比例。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0;" />

编辑:对于第三方网站,在加载页面后,您可以强制它通过JavaScript进行扩展。如果您不想看到初始未缩放的页面,请隐藏Web视图,直到缩小为止。

webView.evalJS('document.body.style.zoom = 1.5;');