2014-02-27 138 views
0

我正在使用Phonegap,並且我想使用jquery mobile捏來放大/縮小選項。 我已經嘗試jgesture和錘子插件來縮放它。我在這段代碼中錯了什麼地方?如何使用jQuery手機使用捏放大/縮小?

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 
     <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> 
     <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
     <link rel="stylesheet" type="text/css" href="css/index.css" /> 
     <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.1.min.css" /> 
     <title>Hello World</title> 
     <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
     <script> 
       $(document).bind("mobileinit", function(){ 
     $.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2"; 
}); 
     </script> 
     <script type="text/javascript" src="js/jquery.mobile-1.4.1.min.js"></script> 
    </head> 
    <body> 
     <div class="app"> 
      <h1>PhoneGap</h1> 
      <div id="deviceready" class="blink"> 
       <p class="event listening">Connecting to Device</p> 
       <p class="event received">Device is Ready</p> 
      </div> 
     </div> 
     <script type="text/javascript" src="phonegap.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
     <script type="text/javascript"> 
      app.initialize(); 

     </script> 
    </body> 
</html> 

回答

1

使用hammer.js捏,pinchin,尖滅

下面是他們的API事件文檔在GitHub上:

https://github.com/EightMedia/hammer.js/wiki/Getting-Started

你也已經基本上是並非用戶可擴展性。 ..:

initial-scale=1, maximum-scale=1, minimum-scale=1, 

此線路:

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, 
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/> 

然後使用jQuery來重新設置:

$.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2"; 

沒有好,在這裏閱讀起來就可以了: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

+0

我也曾嘗試hammer.js,但它不工作爲了我。可能是我無法使用它。您是否需要發送使用hammer.js的任何文檔以防止瑕疵 – user3319135

+0

增加了額外信息,您將最大和最小比例設置爲相同的數字。乾杯! –

+0

我已經設置了最大規模= 1,最小規模= 1和用戶可擴展=否...仍然沒有在我的情況下工作 – user3319135

相關問題