在移動開發中，經常會遇到需要縮放圖片的情況。JQuery Mobile提供了一些方法來實現這個功能。 縮放圖片的第一步是確保圖片可以被縮放。為此，我們需要將圖片包裝在一個div中，然后設置圖片的css屬性，以便它在div中占用整個空間。以下是一個示例代碼：

<style>
#image-wrapper {
width: 100%;
height: 100%;
}
#image {
max-width: 100%;
max-height: 100%;
}
</style>
<div id="image-wrapper">
<img id="image" src="image.png" />
</div>

在這個示例中，我們將圖片包裝在一個id為“image-wrapper”的div中，并將其設置為滿屏。然后，我們設置了一個id為“image”的img元素，并將其最大寬度和高度設置為100%。這將確保圖片保持其原始寬高比，并且能夠被縮放。 接下來，我們需要構建一些方法來縮放圖片。JQuery Mobile提供了兩個方法來進行縮放操作：pinchclose和pinchopen。pinchclose事件在兩個手指放在屏幕上并開始拖動時觸發，而pinchopen事件在兩個手指放開時觸發。以下是一個示例代碼：

<script>
$(document).on('pagecreate', function() {
var scale = 1;
$('#image').on('pinchclose', function() {
scale += 0.1;
$(this).css('transform', 'scale(' + scale + ')');
});
$('#image').on('pinchopen', function() {
if (scale >= 1) {
scale -= 0.1;
$(this).css('transform', 'scale(' + scale + ')');
}
});
});
</script>

在這個示例中，我們首先設置了一個scale變量，它的初始值為1。在pinchclose事件中，我們將scale增加0.1，并使用CSS transform屬性將圖片縮放到新的比例。 在pinchopen事件中，我們檢查當前的scale是否大于等于1，如果是，則將scale減少0.1，并縮放圖片到新的比例。 以上是使用JQuery Mobile實現移動端圖片縮放的方法。了解了這些基本的代碼，你可以嘗試使用JQuery Mobile開發更加高級的移動端應用。