我正在尝试将外部网页加载到小于设备的网页浏览中。这是一个例子:
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.
任何帮助完成这项工作都将不胜感激。
答案 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上,只控制初始缩放级别。”
另请注意,它们是像素和点之间的差异,因为每个屏幕都有不同的像素密度。以下是显示此作品的屏幕截图,请注意周围的红色背景:
这个截图是使用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)
});
所有这一切都取得了前一个视图和半尺寸。 当然,您必须计算自己的统一缩放因子,但这应该是直截了当的,具体取决于您的要求和平台目标。以下是缩放结果的屏幕截图。
使用这些方法的组合,您肯定拥有解决此问题所需的工具。祝你好运!
答案 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;');