一个父子页面,父页面就是header,子页面要载入一个宽度是640px的页面。
这个程序需要同时支持ios,android的手机和平板。
在独立分辨率小于640的设备上,希望载入后能正好缩放全屏显示,然后让用户自行缩放。如果大于640的设备上,就不用缩放显示,这样的代码如何写?
根据我的测试,对于ios设置viewport还能打开缩放的效果,android完全无效缩放内容,并且控制起来的效果和浏览器访问页面完全不同。请问h5+的webview对缩放这块如何控制能做到我想要的效果,谢谢。
一个父子页面,父页面就是header,子页面要载入一个宽度是640px的页面。
这个程序需要同时支持ios,android的手机和平板。
在独立分辨率小于640的设备上,希望载入后能正好缩放全屏显示,然后让用户自行缩放。如果大于640的设备上,就不用缩放显示,这样的代码如何写?
根据我的测试,对于ios设置viewport还能打开缩放的效果,android完全无效缩放内容,并且控制起来的效果和浏览器访问页面完全不同。请问h5+的webview对缩放这块如何控制能做到我想要的效果,谢谢。
希望判断设备分辨率来控制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});
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5, user-scalable=yes" />
这样写会缩放,前提是webview设置了scalable=true
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