liozeeho
liozeeho
  • 发布:2014-12-26 23:18
  • 更新:2019-10-29 08:56
  • 阅读:4086

关于页面缩放

分类:MUI
mui

一个父子页面,父页面就是header,子页面要载入一个宽度是640px的页面。
这个程序需要同时支持ios,android的手机和平板。
在独立分辨率小于640的设备上,希望载入后能正好缩放全屏显示,然后让用户自行缩放。如果大于640的设备上,就不用缩放显示,这样的代码如何写?

根据我的测试,对于ios设置viewport还能打开缩放的效果,android完全无效缩放内容,并且控制起来的效果和浏览器访问页面完全不同。请问h5+的webview对缩放这块如何控制能做到我想要的效果,谢谢。

2014-12-26 23:18 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

希望判断设备分辨率来控制Webview窗口是否支持缩放效果?
可以通过WebviewStyle的scalable属性进行控制:
Boolean,窗口设置为可缩放(scalable:true)时,用户可通过双指操作放大或缩小页面,此时html页面可通过meta节点<meta name="viewport" content="user-scalable=no"/>来限制页面不可缩放。 窗口设置为不可缩放(scalable:false)时,用户不可通过双指操作放大或缩小页面,即使页面中的meta节点也无法开启可缩放功能。 默认值为false,即不可缩放。

// 创建不可缩放的webview  
var wv=plus.webview.create('url','id',{scalable:false});
  • liozeeho (作者)

    新年好,谢谢你的回答,首先这个参数我已经试过了,专门加入了scalable:true的设置,但是在安卓下还是无法实现缩放。


    2015-01-03 18:32

  • DCloud_App_Array

    在head下添加此节点:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>


    2015-01-04 11:49

  • liozeeho (作者)

    ok,有作用,可能是我之前写错了:)


    2015-01-07 11:10

WeskerLo

WeskerLo

<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5, user-scalable=yes" />
这样写会缩放,前提是webview设置了scalable=true

l***@163.com

l***@163.com

<script type="text/javascript"> var wv=plus.webview.create('url','id',{scalable:true}); </script>

加上没有效果啊

该问题目前已经被锁定, 无法添加新回复