游客

标题:移动端页面问题归总和规避方法（页面高度渲染错误、叠加区高亮、事件无法被触发、:active 效果不兼容）
正文:
对于前端开发者来说移动端存在更多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题（我们俗称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.removeEventList
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页