移动端前端bug汇总

移动端前端bug汇总

参考： https://www.cnblogs.com/iovec/p/9729316.html

手机固有

• 某些手机上 fixed 元素在页面滚动时会消失
  使用局部滚动，而不是整页滚动

• 某些 IOS 设备上触发不了点击事件
  在元素上加 pointer:cursor

• IOS 设备上点击事件有 300ms 延迟

  • 使用 fastclick.js（推荐）
  • 不绑 click 事件，绑在 tap 事件上（此方法会导致开发时调试困难，模拟设备模式下触发 tap 有 bug）

• **IOS设备input框调取键盘不灵敏、甚至失效。安卓没问题。因为ios为了解决300ms延迟使用了fastclick，fastclick会产生点击穿透 **

  • mian.js

    // 问题：当使用FastClick 时，input框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。
    // FastClick的ios点击穿透解决方案
    import Fastclick from 'fastclick'
    Fastclick.prototype.focus = function (targetElement) {
      let length
      if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    	length = targetElement.value.length
    	targetElement.focus()
    	targetElement.setSelectionRange(length, length)
      } else {
    	targetElement.focus()
      }
    }
    
    Fastclick.attach(document.body)
    

• IOS 区域滚动卡顿不丝滑
  加上 -webkit-overflow-scrolling: touch

• 某些手机上点击时元素高亮闪一下
  加上 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

• 隐藏滚动条
  加上 ::-webkit-scrollbar{ display: none }

• IOS 设备上 fixed 元素在键盘弹起时位置会变幻不定
  没有很好的解决方案，应从产品设计层面避免这种情况（比如说做转场页面等）

• 在弹窗上滑动时底部页面也跟着动
  在弹窗上需要滚动的地方使用 Swiper，不需要滚动的地方加ontouchmove="event.preventDefault()"

• 某些 IOS 设备上页面滚动时不会连续触发 scroll 事件
  绑在 touchmove 事件上，但手指离开屏幕惯性滑动这段时间还是无法触发，如果确实需要精细控制，可考虑IScroll.js

• 浏览器刷新页面后会记忆之前的滚动条位置
  这通常可以提升用户体验，但有时我们需要禁止这种记忆，加上下面两行

  history.scrollRestoration = 'manual'
  window.onunload = () => window.scrollTo(0, 0)
  

• h5 video 无法自动播放
  无法实现，无法实现，无法实现。这是厂商为避免偷取流量强制规定的。两个方法，一是从产品设计层面规避，二是降级为用户触屏播放，没有第三种可能

兼容性部分

• Array.prototype.sort 方法在某些手机上会不起作用
  sort 方法传入的比较函数应该返回一个数值，而不是布尔值。也就是应该使用 - 号，而不是 > 或 < 号

• Object.assign 方法在某些手机上会不起作用

  • 参考 jQuery 的 $.extend 实现自己的对象合并方法。
  • 引入了 Babel 的 polyfill 。注意，Babel 仅转译语法，而不转译 API，所以使用这些 ES6+ 的 API 都存在不兼容的风险，如果引入了 Babel 的 polyfill，那就不用担心，否则就需要自己 polyfill

• CSS3 特性（flex 布局，transform 等）不支持
  加上前缀，加上前缀，加上前缀。加完前缀不敢说 100% 支持吧，90% 还是有保证的，尤其是移动端。
  手动加是不可能手动加的，可使用 autoprefixer 配合构建工具处理

• 1 像素问题
  这里的1像素并非1逻辑像素（也就是CSS像素），而是1物理像素，可以采用缩放的方法实现，首先设置 1px，然后使用媒体查询根据不同的dpr缩放不同的比例，贴一下 less 的实现

  .one-x { height: 1px;}
  .one-y {  1px; }
  
  @dpr: 1.5, 2, 3;
  @len: length(@dpr) + 1;
  .genScale(@n: 1) when (@n < @len) {
    @val: extract(@dpr, @n);
    @media (min-device-pixel-ratio: @val) {
  	.one-x {
  	  transform: scaleY(1/@val);
  	}
  
  	.one-y {
  	  transform: scaleX(1/@val);
  	}
    }
    .-fix-less-compiler-bug- {
  	display: block;
    }
    .genScale(@n + 1);
  }
  
  .genScale();
  

• 吸顶问题
  IOS 直接使用 position: sticky，安卓机型绑 scroll 事件。（需要提一句的是，IOS 的 scroll 事件触发不连续，安卓对 sticky 的支持不太好。所以上面的方法是比较科学地）附上机型判断代码

  const ua = window.navigator.userAgent.toLowerCase()
  const isAndroid = /android/.test(ua)
  const isIOS = /iphone|ipad|ipod/.test(ua)
  

Vue

• Vue 修改了数据对象视图不更新
  就是不更新，就是不更新，就是不更新。这个官网还有写了。这个和 Vue 监测数据变化的机制有关 。Vue 无法检测到对象的新增属性和 vm.arr[index] = newVal这种方式更新的数组变化。可用以下方法触发

  vm.arr = [ ...vm.arr ]
  vm.obj = { ...vm.obj }
  

• ---

• ---

• ---

• ****+ ****

• ---

• ****+ ****

• ---

• ****+ ****

• ---

• ****+ ****

• ---

• ---