2021-前段高频面试题整理-兼容/优化/网络篇(持续更新)

整理的同时自己也复习一下，答案仅供参考。

移动端的兼容（安卓和ios）

1.怎么判断是安卓还是 ios

//获取浏览器的userAgent,并转化为小写
var ua = window.navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if(isIos){
     
   做苹果手机兼容
}else{
     
  做安卓
}

2.禁止图片点击放大

部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性

img{
      
  pointer-events: none; 
} 

这个会让img标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层

3.禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no">

4.禁止复制、选中文本,只需设置CSS属性 ：

-webkit-user-select:none

5.一些情况下对非可点击元素如(label,span）监听点击事件，不会在IOS下触发，css增加属性：

cursor:pointer

6.上下拉动滚动条时卡顿、慢：

body {
     
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

7.安卓不会自动播放视频，安卓autoplay没效果 需要手动触发一下：

window.addEventListener('touchStart', function() {
     
  audio.play() // 需要主动调一下js，让视频播放
},false)

8.半透明的遮罩层改为全透明

在ios上，当点击一个链接或者通过js绑定了点击事件的元素时，会出现一个半透明的背景，当手指离开屏幕，该灰色背景消失，出现“闪屏”，解决方法：

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