企业网页推广出现移动端兼容问题怎么解决?分享几个实用的css代码

企业网页推广时出现网页兼容问题，不仅在pc端开发中会碰到，而且在APP开发当中也会经常碰到。

1、禁止图片点击放大

部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性，这样会让img标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层。

方案：img{ pointer-events:none; }

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; }

6、安卓不会自动播放视频

安卓手机的autoplay没有生效，需要手动触发一下

方案：window.addEventListener('touchstart',()=>{ audio.play(); },false)

7、半透明的遮罩层改为全透明

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

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

8、ios系统全屏状态下浏览器上下滚动时会出现底色问题

移动端项目要求是全屏滚动，用的是 fullpage，上下滚动时安卓正常，苹果手机浏览器上下滚动时会出现底色问题

方案：document.body.addEventListener('touchmove',function(e) { e.preventDefault();}, {passive:false})。