4

我希望在移动 Web 应用程序（Android 和 iOS）上使用滑动事件，但我还需要浏览器本机捏合缩放功能以保持原位。

我曾尝试使用各种触摸事件库，例如 Hammer.js，但在处理滑动时似乎都放弃了移动 Safari 的捏缩放功能。保持垂直滚动不变也很好。

基本上，我正在寻找一种识别左/右方向滑动的方法，仅此而已。有任何想法吗？

4

1 回答 1

2

我在最近的一个项目中使用了与此类似的功能。要使捏合缩放功能起作用，您只需要确保正确指定视口标签中的值，例如。

<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/>

最重要的值是 user-scalable=yes 和最大比例，因为它必须大于 1.0 才能允许缩放。

您可以在此处找到有关视口的更多信息：https ://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

对于滑动事件，您可以将 swipeleft 和 swiperight 事件绑定到 jQuery Mobile 中的 .on() 函数。

这是您的代码应如下所示的示例：

$('#yourElement').on('swipeleft swiperight', function (event) {
    //swiped to the left
    if (event.type == "swipeleft") {
        //do something
    }
    //swiped to the right
    if (event.type == "swiperight") {
       //do something
    }
});

有关 jQuery Mobile 事件的更多信息，您可以查看此链接（或上面提供的链接 m_gol，因为它们基本相同）：

http://jquerymobile.com/demos/1.1.1/docs/api/events.html

使用上面的两组代码，您将能够检测滑动事件以及捏合以缩放页面。

于 2012-08-06T06:27:30.487 回答