如何禁用后启用用户可升级(视属性)?(How to enable user-scalable (vi

2019-07-03 11:12发布

我创建了一个Android应用程序与PhoneGap的。 我希望能有一个固定的股利在一个页面,而在另一个页面放大项。

使用jQuery移动1.2.0,jQuery的1.8.2,2.0.0的PhoneGap和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").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,它的作用就好像用户可扩展性=无。

结论

我希望能够在第二页中进行放大并在第一固定股利。 是否有人知道如何做到这一点?

感谢您的帮助提前。

Answer 1:

快速回答

不要禁用user-scalable ,而是修改maximum-scale

长的答案

我知道这是一段时间回来,但如果其他人在这个问题上绊倒这是解决方案。 OP我希望你看到这一点。

如果您最初设置user-scalable=no那么如果你改变了属性回无论user-scalable=yes通过javascript,Android浏览器会忽略它(不知道Firefox等)

相反,你应该把初始,最小和最大规模为1.0,用户可升级为1,然后当你修改meta标签,你只最大规模更改为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">

结论

现在,你可以通过最大规模的播放,而始终保持用户可升级的真正改变变焦能力。 请注意,由于某种原因,火狐忽略这个解决办法 ,将允许不管用户放大。 这吮吸考虑的Firefox Android上有超过10万次的下载。



文章来源: How to enable user-scalable (viewport property) after disabling it?