我用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>
有了這個代碼,固定股利是工作,但它不可能在第二頁放大。你可以看到,我在Javascript代碼中改變了viewport的用戶可擴展屬性,但它似乎不起作用。
如果在視口元標記中刪除「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'));
在控制檯中視口的參數確定,但即使用戶可擴展= YES,它充當如果user-scalable = no。
結論
我希望能夠在第二頁中進行放大並在第一固定股利。有人知道如何做到這一點?
感謝您的幫助提前。
我無法得到這個工作。我在android 2.2上。你需要哪個版本的機器人? – spiderplant0
這是一個錯字嗎?你說'minimum-scale = 2.0'。你的意思是說「最大規模= 2.0」嗎? – cherouvim
我發佈了這個問題已經有一段時間了,但是謝謝你的回答。 –