ios微信端网站遇到的问题

Posted rohua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ios微信端网站遇到的问题相关的知识,希望对你有一定的参考价值。

最近的一个项目,在测试ios时遇上了一些问题:

1.给div、span等元素绑定的点击事件无效

2.表单输入时整个页面白屏

3.readonly的元素出现光标(iphon5/ ios8.0)

第一条:给div、span(或非 a,input,button)等元素绑定的点击事件不起作用

 

1
2
3
4
5
6
7
8
$("body").on(‘click‘‘.mask‘function(event) {
 event.preventDefault();
 hideStatus(‘.pos-status‘);
 if($(‘.protocal‘).is(‘:visible‘)){
 hideStatus(".protocal");
 }
  
 });

其中,mask是遮罩层,要实现的功能是:点击遮罩,隐藏弹窗。

在安卓上测试正常,但在ios中(只测了iphone6及以下),并没有什么用。

最终的解决方案是 给mask添加 cursor:pointer。

置于为什么 cursor:pointer 能解决这个问题…

并没有找到答案,但是找到了解决这个问题的其它方案和更具体的问题描述:

问题描述:

当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 divspan 等),此时 click 事件会失效。

解决方案:

  1. 将 click 事件直接绑定到目标元素(即 .target)上
  2. 将目标元素换成 <a> 或者 button 等可点击的元素
  3. 将 click 事件委托到非 document 或 body 的父级元素上
  4. 给目标元素加一条样式规则 cursor: pointer;

总结:推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

引用自: https://happycoder.net/solve-ios-safari-click-event-bug

第二条:表单输入时整个页面白屏(只测了iphone6及以下)

出问题的页面上包含了6条以上的表单元素(不确定是否与数量、结构有关),同样的页面在安卓上正常,在ios中出现如下情况

技术分享

 

1
2
3
4
5
6
&lt;div class="form-item"&gt;
&lt;i class="icon icon-pos"&gt;&lt;/i&gt;
&lt;div class="item-btn"&gt;
&lt;input type="text" name="address" class="form-text fix-addr" placeholder="请输入详细地址"&gt;
&lt;/div&gt;
&lt;/div&gt;

解决方案:给 item-btn 添加 position:relative;

第三条:readonly的元素出现光标(iphone5)

设置input为 readonly 出现了光标,在iphone5/ios8.0出现光标,(未测iphone5以下)

(pc端IE也有同样的问题,通过添加 unselectable=”on” 解决。 -webkit-user-select=none ,-moz-user-select=none )

解决方案:

1 1、input onfocus=”this.blur();”
2 
3 2、$(document).on(‘focus’, ‘input[readonly]’, function () {
4 this.blur();
5 });

 

(或设置为 disabled,但有 disabled 的元素不会提交,所以表单提交前要手动清除disabled)

此外transform在 iphone5失效

解决方案:

-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);

 

补充:

在ios中,使用fixed将元素固定在窗口底部时,如果document的高度(可通过chome f12审察元素查看)小于整个屏幕的高度,随着页面的上拉会出现底部显示不全或无法显示的现象。解决方案是让文档的高度100%。


以上是关于ios微信端网站遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

Wechat 微信端正确播放audiovideo的姿势

PC 端微信扫码注册和登录

云瓣影音网站&&微信端(已开源)

ios 微信端js修改浏览器的title

ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)

扫描二维码判断移动设备(Android/ios),以及判断是否微信端扫描