我在plusready里面写了一个页面缩放。
var screenWidth = plus.screen.resolutionWidth;
document.body.style.zoom = screenWidth / 320;
然后写了一个popover,复制的mui演示框架的代码
<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">回复</a>
</li>
<li class="mui-table-view-cell">
<a href="#">转发</a>
</li>
<li class="mui-table-view-cell">
<a href="#">打印</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#forward"><b>取消</b></a>
</li>
</ul>
</div>
用的js控制
mui('.mui-popover').popover('toggle');
然后,popover弹出菜单点击“取消”,菜单正常消失。下面两个问题:
1、点击菜单上面的空白区域,菜单是消失了,但是我的页面缩放也没有了。
2、点击两个ul之间的空白区域,就是打印和取消之间的空白,整个页面很诡异地整体往上挪了一段距离。菜单再取消显示的时候,下面都会有那个空白区域。
能看到popover的具体实现代码吗?
尘岳two (作者)
因为用px定的单位没法自适应啊。比如父子页面的top和bottom,比如高宽一样的圆形图。
2015-01-27 09:28
尘岳two (作者)
关于适配的问题,我是根据这个问题来的。http://ask.dcloud.net.cn/question/2393
我看了一下,要不就是做多套界面,和Android一样。要不采取rem,但是感觉和zoom缩放一样呢?都是按比例来缩放。所以最后就采取了zoom的做法。
2015-01-27 10:03
尘岳two (作者)
因为如果什么都不做的话,那个高度会出问题的。比如我在iphone5上面定的字页面的top有44px,到了大屏Android手机上,这个距离就不对了,就会遮盖一部分父页面的top内容。
如果用百分比的话,需要高宽一样的圆形图片怎么办?手机屏幕的长宽比不一样的话,出来的效果也不一样啊。
2015-01-27 10:06
尘岳two (作者)
又遇到一个问题,对popover做点击监听,Android有反应,iOS没反应啊。用的
document.getElementById('reply').addEventListener('tap',function(){
alert("点击跳转");
});
2015-01-27 11:08