只有少数情况需要判断操作 基本你就正常写就行
兼容问题自己不常见到 大家记住几个 面试问就说一下 如果面试官说的你不懂?我没有遇见这个很正常
兼容问题 有很多版本都不一样 安卓 ios也有不一样 我们遇见了再去百度解决 如果面试 先记住几个
1 怎么判断是安卓还是 ios**
//获取浏览器的userAgent,并转化为小写 var ua = navigator.userAgent.toLowerCase(); //判断是否是苹果手机,是则是true var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if(isIos){ 做苹果手机兼容 }else{ 做安卓 }
2 兼容问题
1.禁止图片点击放大 部分安卓手机点击图片会放大,如需要禁止放大,只需要设置css属性
img{ pointer-events: none; }
这个会让img标签的点击事件失效,如果想要给图片添加点击事件就要给上面再写一层
2.禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no">
3.禁止复制、选中文本
设置CSS属性 -webkit-user-select:none
4.一些情况下对非可点击元素如(label,span)监听点击事件,不会在IOS下触发,css增加cursor:pointer就搞定了 5.上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
6 安卓不会自动播放视频
安卓autoplay没效果 需要手动触发一下 window.addEventListener('touchstart', function(){ audio.play(); // 需要主动调用一下js 让视频播放 }, false);
7.半透明的遮罩层改为全透明
在ios上,当点击一个链接或者通过js绑定了点击事件的元素时,会出现一个半透明的背景,当手指离开屏幕,该灰色背景消失,出现“闪屏”
html, body { -webkit-tap-highlight-color: rgba(0,0,0,0); }