Wie man Pinch/Zoom auf einem Bild funktioniert

StackOverflow https://stackoverflow.com/questions/7815956

Frage

Ich lerne immer noch die Tricks an JQuery Mobile und habe ein Problem mit dem Zoomen und Zoomen aus einem Bild/Bild auf einer Data-Role = "Seite". Gibt es eine Möglichkeit, die Prise/Zoom mit JQuery Mobile auf einem Bild auf dem iPhone zu erledigen? Ich kann es nicht dazu bringen, am iOS -Simulator zu arbeiten. Hier ist mein Code. 

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>

<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">

<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site     has been configured as a mobile application. 
To configure the site as a mobile application, go to Site -> Mobile Applications ->     Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head> 
<body> 

    <div data-role="page" id="page">
    <div data-role="header">
    <h1>Page One</h1>
    </div>
    <div data-role="content" style="padding:0;">    
           <img src="coffee.gif" width="320" height="480" alt="coffee">
        </div>
    <div data-role="footer">
    <h4>Page Footer</h4>
   </div>
    </div>
</body>
</html>

Vielen Dank für deine Hilfe. Sehr geschätzt.

-Bob

War es hilfreich?

Lösung

Es ist die Ansichtsfenster -Metadateneigenschaft, die diese Einstellungen steuert.

Folge dies Sehen Sie, wie Sie Pinch & Zoom auf JQM iOS aktivieren können (sollte nicht wirklich eine Rolle spielen, dass Sie PhoneGap verwenden).

Hoffe das hilft.

Wenn Jquery Mobile eine Seite verleiht, fügt sie dem Dokumentkopf das folgende Meta -Tag hinzu.

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

Es ist der minimale Maßstab = 1, maximaler Maßstab = 1 Teil des Tags, der den Pinch-Zoom deaktiviert. Wir müssen die Variable $ .mobile.metaviewportent ändern. Wir können dies mit dem folgenden Code tun. 

$(document).bind('mobileinit', function(){ 
    $.mobile.metaViewportContent = 'width=device-width'; 
});

Wenn wir die Menge des Zoomen einschränken wollen, können wir Folgendes verwenden:

$(document).bind('mobileinit', function(){ 
    $.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2'; 
});

Andere Tipps

Bearbeiten Sie das "Ansichtsfenster" in Meta -Tag damit

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top