Currently, I am in the process of developing a phonegap app. Within this app, I have utilized meta tag values using Javascript. I have a specific requirement to modify these meta tag values (such as initial scale, max scale, or min scale) upon clicking certain buttons. However, I have encountered an issue where the changes only occur once and then do not work thereafter. To provide some context, I am testing this app on Android 4.0.4 devices and employing Phonegap 2.9.0.
$(document).ready(function() {
alert("Onload");
});
var scale = 1.0;
function zoomIn(){
scale++;
if (screen.width < 500) {
$('#meta-viewport').attr('content', 'width=device-width, initial-scale=' + scale
+ ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=yes');
}
}
function zoomOut() {
scale--;
if (screen.width < 500) {
$('#meta-viewport').attr('content', 'width=device-width, initial-scale=' + scale
+ ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=yes');
}
}
Here is a snippet of my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum scale=1.0,
minimum-scale=1.0,width=device-width,
height=device-height,target-densitydpi=devicedpi" />
<script type="text/javascript" src="js/jquery_v1.9.1.js"></script>
</head>
<body>
<img id="background" src="img/bgImg.png" style="position: absolute; z-index:-1;" />
<img id="carImg1" src="img/up.png"
style="position: absolute; left: 150px; top: 100px; z-index:1;" />
</body>
</html>
I would greatly appreciate any assistance in resolving this issue. Please advise on what may be causing the problem. Thank you!