0

我使用 iscroll 在 html 中有一个工作的 pinchzoom，但是当我为 ios 和 android 的 phonegap 构建它时，pinch zoom 似乎停止工作。

下面的代码是我在 html 上的工作代码，但是当我尝试将它移植到 ios 和 android 应用程序时它停止工作。在浏览器中查看是可行的。

我不太擅长 javascript 也许有人可以帮我解决这个问题。

这是我的代码。

<!DOCTYPE html> 


<title>My Page</title> 

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

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link href="css/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />

<!-- Scripys -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">
  var myScroll;
  function loaded() {
    myScroll = new iScroll('wrapper',{
      zoom:true, zoomMax: 4 
    });
  }
  document.addEventListener('DOMContentLoaded', loaded, false);
</script>


<!-- Start of Page - Map-->
<div id="map" data-role="page">

  <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <div id="logo">
      <img src="images/logo-dark.png">
    </div>
  </div>

  <!-- Start of Content - Schedule [Map] -->
  <div data-role="content">

    <div id="wrapper" style="width:100%">
      <img class="mapimage" src="images/leaf_map.jpg"/>
    </div>

  </div>
  <!-- End of Content -->

  <!-- Start of Footer -->
  <div data-role="footer" data-position="fixed" data-role="footer" data-tap-toggle="false">

    <div class="banner">
      <div>
        <a href="promo.html" data-rel="dialog" data-transition="pop">
          <span>This app was created by:</span> 
          <span><img src="images/iwebxpert-logo.png"></span>
          <span>iWebXpert</span>
        </a>
      </div>
    </div>

    <!-- Navbar / Main Navigation -->
    <div data-role="navbar">
      <ul>
        <li>
          <a href="index.html" data-ajax="true" data-transition="slide" data-direction="reverse"><img src="images/home-icon.png"></a>
        </li>
        <li>
          <a href="schedule.html" data-ajax="true" data-transition="slide" data-direction="reverse"><img src="images/schedule-icon.png"></a>
        </li>
        <li>
          <a href="#" data-ajax="true" data-transition="slide" class="ui-btn-active"><img src="images/map-icon.png"></a>
        </li>
        <li>
          <a href="design.html" data-ajax="true" data-transition="slide"><img src="images/design-icon.png"></a>
        </li>
        <li>
          <a href="info.html" data-ajax="true" data-transition="slide"><img src="images/about-icon.png"></a>
        </li>
      </ul>
    </div>


  </div>
  <!-- End of Footer -->

</div>
<!-- End of Page - Map-->

<script>loaded();</script>

4

1 回答 1

0

由于您正在从外部源加载脚本（如果您还没有），请确保添加

 <access origin="*" />

到您的 config.xml 文件

于 2013-09-13T15:36:17.753 回答