0

私は iscroll を使用して html でピンチズームを実行していますが、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>

4

1 に答える 1

0

外部ソースからスクリプトを読み込んでいるので（まだ行っていない場合）、必ず追加してください

 <access origin="*" />

config.xml ファイルに

于 2013-09-13T15:36:17.753 に答える