Question

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

以下代码是我在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>

Answer 1

由于您从外部源加载脚本（如果尚未加载），请确保添加

 <access origin="*" />

到你的config.xml文件

Pinch Zoom问题Phonegap Build停止工作

1 个答案: