как заставить пинч / зум работать на изображении - PullRequest
Новая
       38

как заставить пинч / зум работать на изображении

3 голосов
/ 19 октября 2011

Я все еще изучаю трюки с мобильным jQuery, и у меня возникают проблемы с увеличением или уменьшением изображения / изображения на data-role = "page". Можно ли с помощью jquery mobile заставить пинч / зум работать с изображением на iPhone? Не могу заставить его работать на iOS Simulator. Вот мой код 

<!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>

Большое спасибо за вашу помощь. Очень признателен.

-обоб

Ответы [ 2 ]

3 голосов
/ 30 декабря 2012

отредактируйте "viewport" в метатеге с помощью этого 

<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" />
3 голосов
/ 02 декабря 2011

Этим свойством управляют свойства метаданных области просмотра.

Следуйте этому , чтобы узнать, как включить масштабирование и масштабирование на JQM iOS (не должно иметь значения, что вы используете PhoneGap).

Надеюсь, это поможет.

Когда jQuery Mobile отображает страницу, он добавляет следующий метатег к заголовок документа. 

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

Это минимальная шкала = 1, максимальная шкала = 1 часть тег, который отключает масштабирование пинч Что нам нужно сделать, это изменить переменная $ .mobile.metaViewportContent. Мы можем сделать это с помощью следующий код 

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

Если мы хотим ограничить степень масштабирования, мы можем использовать следующее: 

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