Question

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

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.

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

Answer 1

这实际上非常容易实现，并且内置于所有平台的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

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

Answer 2

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

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

Answer 3

要考虑的另一点是，您加载的页面可能不适合移动设备。 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;');

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

3 个答案: