我用 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 可以正常工作，但无法放大第二页。如您所见，我在Javascript代码中更改了viewport的user-scalable属性，但似乎没有生效。
如果您在视口元标记中删除“user-scalable=no”，您可以放大第二页，但 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。
结论
我希望能够放大第二页并在第一页中有一个固定的 div。有人知道该怎么做吗？
提前感谢您的帮助。