webview打开一个窗口 设置和浏览器一样自动缩放

我用浏览器打开一个页面,网页会自动适应手机大小,
但是用webview open同样的页面,网页不会自动缩放,且没办法向浏览器一样用手势缩放,请问该在哪里设置呀?

2016-07-19 15:10 添加评论 分享
已邀请:

最佳回复

1

DCloud_UNI_Trust - 少说废话

赞同来自: 3332842@qq.com

请参考5+的webview模块中,对webviewObject设置style,中的scalable属性,并且结合meta标签中的属性来实现。
代码如下:

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,user-scalable=yes" />  
        <link href="../../css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">标题</h1>  
        </header>  
        <div class="mui-content">  
            <ul class="mui-table-view">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                            Item 1  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                             Item 2  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                             Item 3  
                        </a>  
                    </li>  
                </ul>  
        </div>  
        <script src="../../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                plus.webview.currentWebview().setStyle({  
                    scalable: true  
                });  
            });  
        </script>  
    </body>  

</html>  

请注意meta标签中的minimum-scale=1,maximum-scale=5,user-scalable=yes三个参数的设置,来实现可缩放,以及缩放的范围。

要回复问题请先登录注册