移动前端系列——移动端页面坑与排坑技巧.docVIP

移动前端系列——移动端页面坑与排坑技巧 对于前端开发者来说移动端存在更多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题（我们俗称BUG或坑），那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧。 移动端页面在不同设备、不同操作系统 、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6坑多了。下面先介绍一下4类具体常见的坑： 1、外观 A、页面高度渲染错误 在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉： document.documentElement.style.height = window.innerHeight + px; B、叠加区高亮 在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉： -webkit-tap-highlight-color:rgba(0,0,0,0); 2、行为 A、事件无法被触发 在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。 B、:active 效果不兼容 在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法: var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false); 3、应用 A、浏览器崩溃 var act = function(){ window.removeEventListener(devicemotion,act); }; window.addEventListener(devicemotion,act,false); 解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。 B、预加载、自动播放无效 如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载: //play and pause it once document.addEventListener(touchstart, function () { document.getElementsByTagName(audio)[0].play(); document.getElementsByTagName(audio)[0].pause(); }); C、无法同时播放多音频 在android设备中,播放后一音频会打断前一音频，而不会同步播放,这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。 D、不支持局部滚动 在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案: 1、巧用布局直接设置样式滚动条在body(html)上，其他元素“错觉滚动”。 2、利用iscroll、自写js控制translate、scrollTop模拟 4、系统/硬件 A、怪异悬浮的表单 在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。 B、错误出现滚动条 在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden 无效，通过一系列尝试使用古老的 body scroll