移动端兼容性问题解决方案

发表于 | 分类于

ios微信浏览器内非button、a标签点击事件失效

ios微信浏览器内非button、a标签，如（div、span…）点击事件(click)无效的处理办法: ccs加上cursor: pointer;

ios中设置readonly还有光标

在input上添加 unselectable=”on” onfocus=”this.blur()” 即可

1
<input type='text' unselectable="on" onfocus="this.blur()" readonly />

ios端的输入框input type=”number”无效

使用input type=”text” 并加上oninput属性

1
<input type='text' oninput="this.value=this.value.replace(/[^0-9.]+/,'')" />

h5底部输入框被键盘遮挡问题

android和ios部分机型，当输入框在最底部，点击软键盘后输入框会被遮挡
方案0: 在input的点击事件，或者获取焦点的事件中，加入以下api，让dom元素出现在可见视图的顶部或底部

1
document.querySelector('#inputId').scrollIntoView();

方案1:
1
2
3
4
5
6
7
8
9
var oHeight = $(document).height();
   
$(window).resize(function(){
    if($(document).height() < oHeight){
        $("#footer").css("position","static");
    }else{
        $("#footer").css("position","absolute");
    }
});

Input 的placeholder会出现文本位置偏上的情况

PC端：设置line-height等于height
移动端：设置line-height：normal

移动端点击后的高亮效果

1
{-webkit-tap-highlight-color:rgba(0,0,0,0);}