我正在使用适用于 Android 的本地 HTML 文件(非远程)开发 Titanium webview 移动应用程序。我的 HTML 代码包含一个地图(类似于 Google 地图)并允许用户使用缩放手势。
为了在我的本地 HTML 网页中启用缩放和缩放(不仅仅是在地图上),我在我的 HTML 标题中添加了以下元标记:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.01, user-scalable=1">
该属性的最小值maximum-scale
是 1.01 除此之外,我的ApplicationWindows.js
文件将 webview 的scalesPageToFit
属性设置true
为如下:
var webView = Ti.UI.createWebView({
url : "/HTML/index.html",
scalesPageToFit : true
});
这两项更改在我的应用程序中启用了捏合缩放功能。但是,只有在用户之前在某个地方(在 DOM 的任何其他部分,但在地图之外)进行了捏拉缩放时,捏拉缩放功能才适用于地图。因此,作为示例,假设这是我的 HTML 代码(基本 gmaps 示例):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=2, user-scalable=1">
<meta charset="utf-8">
<style>
html, body, #map-canvas { height: 70%; margin: 0px; padding: 0px; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8, center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
请注意,地图仅占屏幕的 70%,底部有 30% 的“空白”空间。
我的 ApplicationWindow.js 文件是:
// Application Window Component Constructor
function ApplicationWindow() {
var self = Ti.UI.createWindow({
backgroundColor : '#FFFFFF',
modal : true,
exitOnClose : true // Android only
});
var webView = Ti.UI.createWebView({
url : '/HTML/gmap.html',
scalesPageToFit: true
});
self.add(webView);
return self;
}
//make constructor function the public component interface
module.exports = ApplicationWindow;
运行应用程序(在 Android 模拟器、Android 手机或 Android 平板电脑中),行为始终相同:地图上的捏合缩放仅在我们之前缩放 DOM 的任何其他部分时才有效(在本例中为白色底部的空间)。一旦检测到缩放,捏缩放手势也可以在地图上使用,但之前不行!
细节:
- 钛 SDK:3.1.2GA -
- 平台和版本:在 Android v.2.3.4、v.4.0、v.4.0.3 上测试
- 设备:模拟器、手机和平板电脑
- 主机操作系统:在 Ubuntu 和 Debian 上测试
- 钛工作室:3.1.3.201309132423
我不确定我做错了什么,或者这只是一个钛错误......提前致谢!