ios微信端网站遇到的问题

Posted 2020-10-01 rohua

最近的一个项目，在测试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 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 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

<div class="form-item"> <i class="icon icon-pos"></i> <div class="item-btn"> <input type="text" name="address" class="form-text fix-addr" placeholder="请输入详细地址"> </div> </div>

解决方案：给 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%。