0

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

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。

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

4

3 回答 3

2

这实际上很容易做到，并且内置于所有平台的 Titanium 中。只需使用scalesPageToFitWebView 的属性，自 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 视图。”

“在 Android 上，仅控制初始缩放级别。”

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

此屏幕截图是从使用 Titanium Studio 的“默认窗口”模板的原版项目中截取的。我所做的只是用这个要点替换“ui/common/FirstView.js”文件。

如果您使 WebView 非常小，它可能不会显示内容（因为许多网站都指定了最小缩放比例），所以在这种情况下，我建议使用这样的转换：

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

所有这一切都是采用先前的视图并将其缩小一半。当然，您必须计算自己的统一比例因子，但这应该很简单，具体取决于您的要求和平台目标。这是缩放结果的屏幕截图。

这也有效

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

于 2012-10-16T02:46:33.577 回答
1

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

var webview = Titanium.UI.createWebView({
    width:320,
    url:'http://bostonglobe.com'
});
于 2012-10-04T18:32:03.503 回答
1

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

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

<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;');
于 2012-10-20T04:00:33.873 回答