NEWS

技术文章

H5app开发的几个问题

编辑:
阳程网络
发布时间:
2019-11-6
点击:
一.app切换到后台停止H5页面中音频播放
   最近做了一个app的H5页面,碰到一个问题,就是在页面上写了一个audio音频播放标签,但是点击播放之后,在app失焦(切到后台,息屏,锁屏)之后依然在继续播放,这是不符合需求的,查询资料后发现通过使用visibilitychange事件可以解决这个问题:
document.addEventListener('visibilitychange', function() {
    var audio = document.querySelector('audio');
    if(document.hidden) {
        audio.pause();//一旦切换到后台或者息屏锁屏则暂停audio
    } else {
        audio.play();//聚焦到app则开始播放
    }
})

二.使用overflow:scroll;后在IOS上卡顿问题
    在app上有个常见的需求,就是用H5做navBar,内容滑动,内容div设置overflow:scroll之后,在android上的体现是没有任何问题的,但是在ios系统上就会滑动特别卡顿,这时候使用-webkit-overflow-scrolling: touch;就可以解决了,使用ios的硬件加速特性。

三.获取屏幕高度为0
    有时候在webApp上需要获取手机屏幕的高度来做一些特殊的需求,在开发中本人使用的是window.innerHeight来获取高度,之前使用过window.screen.height,但是后者似乎包括了手机状态栏等区域的高度,不适用,使用window.innerHeight的时候发现偶发页面看不到元素,但是元素是存在的,一调试发现取到的高度为0,最后解决办法:
var resize = false;
window.addEventListener('resize', function(){
    if(!resize) {
        $(element).height(window.innerHeight);
        resize = true;
    }
});
标签  H5开发 网站开发
相关文章

Copyright@宁波起点网络. All rights reserved. Powered by 起点网络       备案号:浙ICP备 16017710号