52157088@qq.com
52157088@qq.com
  • 发布:2016-07-19 15:10
  • 更新:2016-07-19 19:56
  • 阅读:2459

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

分类:HTML5+

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

2016-07-19 15:10 分享
已邀请:

最佳回复

DCloud_UNI_Trust

DCloud_UNI_Trust

请参考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三个参数的设置,来实现可缩放,以及缩放的范围。

  • 52157088@qq.com (作者)

    感谢您的回复,我是在当前这个页面打开一个页面做为新闻详细页,,按照您的提示,打开的那个页面可以缩放了,但是是否可以在初始化的时候定义meta标签呢??
    mui.init();
    //初始化操作
    var subpage_style = {
    top: '45px',
    bottom: '0',
    scalable: true
    };
    mui.plusReady(function() {
    var self = plus.webview.currentWebview();
    var w = plus.webview.create(self.url, self.url, subpage_style);
    w.show();
    })

    2016-07-19 20:46

  • DCloud_UNI_Trust

    回复 52157088@qq.com:meta标签是写在html页面里面的,您想实现哪张页面进行缩放,在制作html页面的时候进行对应参数的修改即可。

    2016-07-20 08:15

  • 52157088@qq.com (作者)

    mui.plusReady(function() {
    var self = plus.webview.currentWebview();
    var w = plus.webview.create(self.url, self.url, subpage_style);
    w.show();
    })
    你看这端代码,我是通过webview.create直接打开的外部网页,是不是就没办法处理了呀

    2016-07-22 11:01

  • DCloud_UNI_Trust

    回复 52157088@qq.com:不能哦。

    2016-07-22 11:09

要回复问题请先登录注册