j***@163.com
j***@163.com
  • 发布:2018-12-21 08:43
  • 更新:2019-10-05 20:46
  • 阅读:1862

200元求教一个mui-popover在android手机上定位不准确的问题。

分类:MUI

[内容]
popover在页面有横向滚动后,在android的微信浏览器上弹出位置不对,好像没把滚动条的位置加上,ios微信没问题。
附件为我保存的html的公众号源码,可以测试,到时会有个公众号地址,只要能在android手机上弹出位置正确就行。
现在是chrome显示正确,safari显示也不对,ios版微信显示正确,但android版微信显示不正确。
测试html下载
重现步骤
使用类似这样的代码:

mui('#savePopover').popover('toggle',e);
<div id="savePopover" class="mui-popover">  
    <div class="mui-scroll-wrapper">  
            <div class="mui-media-body" style="padding:0px 16px;">  
                  <div id="selecteddiv" style="text-align:left;"></div>  
            </div>  
    </div>  
</div>  

.mui-popover {  
   height: 200px;      
}  

联系方式
[QQ]27331849

客户端环境: ios11,微信公众号
1、我用mac上的chrome来浏览这个页面,进行横向滚动和缩放方式,则popover弹出位置是正确的。
代码类似:
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
.....
</div>
</div>
2、但我用Safari来浏览这个页面,也是进行横向滚动,则popover弹出位置不准确
我是用Safari的开发工具中的响应设计模式和模拟用ios11的浏览器来在Safari中测试的。

应该是mui这块代码没兼容iphone。

查到有段代码
window.innerWidth
在safari中的值是373
但在chrome中的值是2500
因为这个值的不同,引发bug.
mui需要对不同的浏览器兼容下
window.innerWidth和widow.innerHeight
我的页面开启了 viewport,user-scalable=yes

2018-12-21 08:43 负责人:无 分享
已邀请:
深海智行

深海智行 - 专注前端培训

实在不行的话,就找我:2579915825

j***@163.com

j***@163.com (作者)

愿意帮忙的请联系我的qq 27331849
如果已经解决,我也会在这里说明的。

风大大

风大大

时隔将近一年,解决了吗

d***@sina.com
回梦無痕

回梦無痕 - 暂停服务

这种问题之前也遇到过,做电影院选座的,处理有点复杂。
大概在mui.js的5918行开始,这里就是这个定位的代码,因为这个座位容器可以放大缩小,情况很多种,当时愣是没有做好。。。
最后换了别的方法,没有做这样的吸附tis了。

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