另一项测试

Question

我使用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代码中更改了视口的用户可伸缩属性，但它似乎没有生效。

如果在视口元标记中删除“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，它也就像用户可伸缩=否。

结论

我希望能够放大第二页并在第一页中使用固定的div。有人知道怎么做吗？

提前感谢您的帮助。

Answer 1

快速回答

请勿停用user-scalable，而是修改maximum-scale

长答案

我知道这是一段时间了，但如果其他人偶然发现这个问题，这就是解决方案。我希望你能看到这个。

如果您最初设置user-scalable=no，那么无论您是通过javascript将属性更改回user-scalable=yes，Android浏览器都会忽略它（不确定Firefox等）

相反，您应该将初始，最小和最大比例放在1.0，用户可扩展为1，然后在修改元标记时，只将最大比例更改为2.0。请参阅下文以获得澄清。

初始状态

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

初始状态

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

<强>结论

现在，您可以通过播放最大比例来改变缩放功能，同时始终保持用户可扩展性为true。请注意，由于某种原因，Firefox会忽略此解决方法并允许用户进行缩放。考虑到Android上的Firefox有超过1000万次下载，这很糟糕。

如何在禁用后启用用户可伸缩（viewport属性）？

另一项测试

结论

1 个答案: