苹果机踩过的坑

苹果机踩过的坑

1.音视频无法自动播放的问题
<script>
function audioAutoPlay(id) {var audio = ElementById(id),play = function () {audio.play();veEventListener("touchstart", play, false);};audio.play();document.addEventListener("WeixinJSBridgeReady", function () {//微信play();}, false);document.addEventListener('YixinJSBridgeReady', function () {//易信play();}, false);document.addEventListener("touchstart", play, false);}audioAutoPlay('bg');
</script>2. WOW.js不能用，会出现底部留白的问题,可以用scrollrevealJs替代，完美解决3. 视频设置不要控制器的参数
<video src="./video/movie.mp4?v=1.04" onclick="playPause()"poster='./images/1566017156(1).jpg?v=1.04' id="video01" preload="auto"webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow"x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"style="object-fit:fill">您的浏览器不支持 video 播放。
</video>4.判断是苹果机还是安卓机
<script>var u = navigator.userAgent, app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {}if (isIOS) {}
</script>5.滚动条距离顶部多长，然后再滑动执行的方法；不能用
原因应该是微信自带的下滑出现该网站由提供，导致的滑动冲突问题6. 关于css的这个css3样式,可以写链式样式，但是我这边亲测，写在<style>里，苹果机会出现无法使用的问题
animation-delay: 0 !important;7.视频的版本号小数点不能超过2位数，不然在苹果机会出现播放不了的情况，安卓机亲测是可以的,也可能是缓存问题，但最好还是不要超过两位数，保证随时可以播放的状态