I created an Android app with Phonegap. I want to be able to have a fixed div in one page and to zoom-in in another page.

I use jquery mobile 1.2.0, Jquery 1.8.2, Phonegap 2.0.0 and Android 2.2.

My code is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>My Phonegap Application</title>

<link rel="stylesheet" href="./lib/jquery.mobile-1.2.0.css" />
<script src="./lib/jquery-1.8.2.js"></script>
<script src="./lib/jquery.mobile-1.2.0.js"></script>

<script src="./lib/cordova-2.0.0.js" type="text/javascript"></script>

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

<script>
    function change_page(){
        $("#viewport").attr("content", "initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, user-scalable=yes, target-densitydpi=device-dpi");
        $.mobile.changePage( "#pageImage", { transition: "slideup"} );
    }
</script>

<style>
    .fixe {
        position: fixed;
        bottom: 0;
        z-index: 5000;
        margin: 0;
        padding: 0;
        height: 50px;
        width: 100%;
    }

    img {
        height: 100%;
        width: 100%;
    }
</style>

</head>

<body>

<div data-role="page" id="pageHome">
    <div data-role="content" data-theme="c">
        <button id="switchPage" onClick='change_page();'>switchpage</button>

    <p>
        Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

        Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.

        Horum adventum praedocti speculationibus fidis rectores militum tessera data sollemni armatos omnes celeri eduxere procursu et agiliter praeterito Calycadni fluminis ponte, cuius undarum magnitudo murorum adluit turres, in speciem locavere pugnandi. neque tamen exiluit quisquam nec permissus est congredi. formidabatur enim flagrans vesania manus et superior numero et ruitura sine respectu salutis in ferrum.

        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.

        Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.
    </p>    

        <div class="fixe">
            <img id="fixedImage" src="./res/myfixedimg.png">
        </div>
    </div>
</div>

<div data-role="page" id="pageImage">
    <div data-role="content" data-theme="a">
        <img id="my_img" src="./res/myimg.png" width="671" height="811">
    </div>
</div>


</body>
</html>

With this code, the fixed div is working but it's not possible to zoom in the second page. As you can see, I changed the user-scalable property of viewport in the Javascript code, but it does not seem to take effect.

If you remove "user-scalable=no" in the viewport metatag you can zoom in the second page but the div is not fixed.

Another test

I also tried to get rid off user-scalable in the meta tag. In the first page, I added :

$("#viewport").attr("content", "user-scalable=no, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi");
console.log($("#viewport").attr('content'));

In the change_page function:

$("#viewport").attr("content", "user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi");
console.log($("#viewport").attr('content'));

The parameters of the viewport in the console are ok but even if user-scalable=yes, it acts as if user-scalable = no.

Conclusion

I want to be able to zoom in the second page and have a fixed div in the first. Does someone know how to do that ?

Thanks for your help in advance.

Quick Answer

Don't disable user-scalable but instead modify maximum-scale

Long Answer

I know this was a while back, but if anyone else stumbles on this problem this is the solution. OP I hope you see this.

If you initially set user-scalable=no then regardless if you change the attribute back to user-scalable=yes via javascript, the Android browser will ignore it (not sure about Firefox, etc.)

Instead, you should put the initial, minimum, and maximum scales to 1.0 with user-scaleable at 1 and then when you modify the meta tag, you only change maximum scale to 2.0. See below for clarification.

Initial State

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

Initial State

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=2.0, maximum-scale=1.0, user-scalable=1">

Conclusion

Now, you can alter zoom capability by playing with maximum-scale while always keeping user-scalable true. Note, that for some reason Firefox ignores this workaround and will allow the user to zoom regardless. That sucks considering Firefox on Android has over 10 million downloads.