3

Phonegap で Android アプリを作成しました。あるページに固定 div を配置し、別のページにズームインできるようにしたいと考えています。

jquery mobile 1.2.0、jquery 1.8.2、Phonegap 2.0.0、および Android 2.2 を使用しています。

私のコードは次のとおりです。

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

このコードでは、固定 div は機能していますが、2 ページ目を拡大することはできません。ご覧のとおり、JavaScript コードで viewport の user-scalable プロパティを変更しましたが、反映されていないようです。

ビューポート メタタグの「user-scalable=no」を削除すると、2 ページ目を拡大できますが、div は固定されません。

別のテスト

また、メタ タグでユーザー スケーラブルを取り除こうとしました。最初のページで、次を追加しました。

$("#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'));

change_page 関数では:

$("#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'));

コンソールのビューポートのパラメーターは問題ありませんが、user-scalable=yes の場合でも、user-scalable = no のように動作します。

結論

2番目のページをズームインして、最初のページに固定divを持たせたいです。誰かがそれを行う方法を知っていますか?

事前にご協力いただきありがとうございます。

4

1 に答える 1