移动端开发安卓和ios兼容性的那些坑以及解决方案

最新推荐文章于 2024-12-10 09:25:06 发布

海是最蓝的天

最新推荐文章于 2024-12-10 09:25:06 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：移动开发

本文链接：https://blog.youkuaiyun.com/li1342392184/article/details/88044732

移动开发专栏收录该内容

3 篇文章

订阅专栏

本文解决移动端Web项目中全屏滚动、苹果与安卓视频播放差异及隐藏地址栏的问题，提供代码示例，确保用户体验一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

解决方案：
 document.body.addEventListener('touchmove', function (e) {
        e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false});

问题2：移动端用video标签用苹果手机在浏览器上打开和安卓机上打开是不一样的

解决方案：
苹果机默认打开video是全屏的，所以要阻止默认全屏，加上下面这四个属性就可以啦
<video src="#" webkit-playsinline='true' playsinline='true' x5-playsinline x-webkit-airplay="allow" > </video>
 webkit-playsinline -----针对I0S9
 playsinline------针对IOS10和11 IOS微信浏览器支持小窗内播放
 x-webkit-airplay="allow"----------启用AirPlay支持
 x5-playsinline----------x5内核video

问题3：移动端隐藏浏览器的地址栏和菜单栏

解决方案：
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='full-screen' content='true' />
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />