【兼容】浏览器、Ios、Android兼容问题（一直更新）

#浏览器差异
由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。

• 使用Trident内核的浏览器：IE、Maxthon、TT；
• 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；
• 使用Presto内核的浏览器：Opera7及以上版本；
• 使用Webkit内核的浏览器：Safari、Chrome。

这里我会将平时开发的时候遇到一些兼容性问题，和属性差异记录下来，往往这些基础的东西，最容易让人忽视，所以这里我要遇到一个，填一个。

---

浏览器

Button问题

在IE中button默认type就是button，一个单纯的按钮，没有任何功能，但是在其他浏览器中，button默认自带type="submit"光环,所以有必要小心使用，最好养成给button添加type的习惯，不然一直提交，都不知道为什么触发不了事件，或者不听话的直接提交了。

Select问题

select标签中通过设置option的selected="selected"居然无效，这也是部分浏览器会有问题，解决办法需要添加autocomplete="off"

<select autocomplete="off">
    <option>是</option>
    <option selected="selected">否</option>
</select>

数值长度过长导致失去精准问题

2019年10月29日（更新）

·636250118026166272· 这个值是从后台传来的，但是后面要用的时候，后台需要数值类型，所以就转换呗，后面发现数值不对，找了半天问题发现原来是转换的过程中数值变化了。
字符串数值长度过长，导致转换成数值的时候精度不准确，所以接口一直报错

解决办法：1：让后台使用字符串类型；2：使用JISON 库来实现long类型数值

ios

ios滚动问题

页面内容过长超出一个屏的时候，页面自然需要向下滚动来展示，但是滚动也有原生的滚动（回弹效果），和普通滚动，触摸到哪，就停在那。所以安卓没有问题，ios就会有卡顿问题。
解决方法：就是下面这个神器（坑多） MDN定义的-webkit-overflow-scrolling

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto:使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

2018年12月3日（更新）

-webkit-overflow-scrolling:touch会引发的bug：

• 滚动中 scrollTop 属性不会变化
• 手势可穿过其他元素触发元素滚动
• 滚动时暂停其他 transition
• 如果你有类似tabbar的底部导航（必然是fixed布局），那就需要去掉这个属性，不然的话电脑上看不出来问题，到了ios，你会发现底部tabbar被遮挡（没有内容的情况）
• 下面是电脑，没有问题
  

下面是ios，底部没了（不是我截的哦，我收缩的图片高度）

---

ios alert()弹窗显示域名问题

解决办法：利用window.alert 重写alert方法

window.alert = function(name){  
    var iframe = document.createElement("IFRAME");  
    iframe.style.display="none";  
    iframe.setAttribute("src", 'data:text/plain,');  
    document.documentElement.appendChild(iframe);  
    window.frames[0].window.alert(name);  
    iframe.parentNode.removeChild(iframe);  
} 

ios日期乱码问题

在ios系统下，js中去new Date的时，传入参数带有"-" ios不支持这类日期格式（yyyy-mm-dd），把"-“改为”/"(yyyy/mm/dd)就好了。

解决办法：.replace(/-/g,'/')

ios与android 复制到剪贴板

• js中复制的内容必须在input或者textarea中才行，div中是无法复制的
• 复制的内容，必须要选中状态：select()

兼容写法：

$('#copy').click(function () {
    var text = $('.p-white-con .action').text();  		// 获取要复制的内容
    var input = document.createElement("input");			//生成input
    input.value = text;									// 将要复制的内容 放入input 
    document.body.appendChild(input);						// 生成节点
    input.select();										// 选中内容
    input.setSelectionRange(0, input.value.length), document.execCommand('Copy'); 	// 复制
    document.body.removeChild(input);            //删除节点
    alert("复制成功", "text");
})

ios 虚拟键盘收起的时候，键盘区域留白问题

问题如下gif图，像input,textarea这种拉起虚拟键盘收起会大片留白。

解决办法： 在调试的时候，发现window的resize事件无法触发，很是感觉奇怪，最后只能取巧利用失焦事件来触发。

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
$('input,textarea').blur(function (){
  $('body').height(clientHeight + 1); // 改变body的高度
  setTimeout(function () {
    $('body').height(clientHeight); // 恢复body的高度
  }, 0);
})

ios input 输入小数点的时候，光标跑到小数点前面

判断客户端是安卓还是ios
如果是安卓就用
如果是ios就使用

iphoneX 底部适配

 var isiOS
   isiOS = /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
   if (isiOS) {
     console.log('X')
     $('body,.tabbar').css({
       paddingBottom: '34px'
     })
 }

微信X5内核浏览器

如何禁止视频全屏播放

需要给视频标签添加

webkit-playsinline playsinline x5-playsinline x-webkit-airplay=‘allow’

<video  webkit-playsinline playsinline x5-playsinline x-webkit-airplay='allow' autoplay controls='false' src="xxx.mp4" style="object-fit: fill;height: 100%; width: 100%;"></video>

持续填坑…

↓ ↓ ↓

↓ ↓

↓

如果你也有遇到的这些细小的兼容问题，请在评论区添加一下，我会把你的坑进来（会备注上你的ID），人多力量大，遇到的坑千奇百怪，你也可以转载过去，评论区留下你的地址即可。

程序员常用网站（一）
程序员常用网站（二）
程序员常用网站（三）
程序员神器