博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
两年移动端前端开发问题吐血汇总
阅读量:5872 次
发布时间:2019-06-19

本文共 2305 字,大约阅读时间需要 7 分钟。

手机固有 bug

  • 某些手机上 fixed 元素在页面滚动时会消失

使用局部滚动,而不是整页滚动

  • 某些 IOS 设备上触发不了点击事件

在元素上加 pointer:cursor

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

两种方法,一是使用 fastclick.js(推荐)。二是不绑 click 事件,绑在 tap 事件上(此方法会导致开发时调试困难,模拟设备模式下触发 tap 有 bug)

  • IOS 设备上 fixed 元素在键盘弹起时位置会变幻不定

没有很好的解决方案,应从产品设计层面避免这种情况(比如说做转场页面等)

  • 在弹窗上滑动时底部页面也跟着动

在弹窗上需要滚动的地方使用 ,不需要滚动的地方加 ontouchmove="event.preventDefault()"

  • 某些 IOS 设备上页面滚动时不会连续触发 scroll 事件

绑在 touchmove 事件上,但手指离开屏幕惯性滑动这段时间还是无法触发,如果确实需要精细控制,可考虑

  • 浏览器刷新页面后会记忆之前的滚动条位置

这通常可以提升用户体验,但有时我们需要禁止这种记忆,加上下面两行

history.scrollRestoration = 'manual'window.onunload = () => window.scrollTo(0, 0)
  • h5 video 无法自动播放

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

兼容性部分

  • Array.prototype.sort 方法在某些手机上会不起作用

sort 方法传入的比较函数应该返回一个数值,而不是布尔值。也就是应该使用 - 号,而不是 ><

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

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

  • CSS3 特性(flex 布局,transform 等)不支持

加上前缀,加上前缀,加上前缀。加完前缀不敢说 100% 支持吧,90% 还是有保证的,尤其是移动端。手动加是不可能手动加的,可使用 autoprefixer 配合构建工具处理

  • 1 像素问题

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

.one-x { height: 1px;}.one-y { width: 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)

库 & 框架

  • jQuery 的 ajax 方法传参 data 项问题

data 的 key/value 键值对的 value 为 undefined 时 jQuery 会直接不传这一条,为 null 时传空字符串

  • Vue 修改了数据对象视图不更新

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

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

细节

  • IOS 区域滚动卡顿不丝滑

加上 -webkit-overflow-scrolling: touch

  • 某些手机上点击时元素高亮闪一下

加上 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

  • 隐藏滚动条

加上 ::-webkit-scrollbar{ display: none }

---------------------------- 我是结束线 ----------------------------

暂时就这些了,更多的以后更新

转载于:https://www.cnblogs.com/iovec/p/9729316.html

你可能感兴趣的文章
在你迷茫时不如学好一门语言(送给大一的学弟学妹)
查看>>
2012年度广州市重点软件企业名单
查看>>
去掉考勤
查看>>
论学历与经验
查看>>
python模拟键盘输入+切换键盘布局
查看>>
Maven + Docker
查看>>
Win10系统特别卡的一个原因
查看>>
denyhosts、中文文档乱码、端口占用查询
查看>>
解决问题__max 模型白色 材质球换没用
查看>>
洛谷 P1074 靶形数独 Label:search 不会
查看>>
利用axios获取数据并渲染到视图层
查看>>
鸭子类型duck typing(动态)
查看>>
欧拉公式
查看>>
poj2352
查看>>
android短信验证
查看>>
JasperReport学习笔记6-JRXML的标签
查看>>
《数学之美》读书笔记和知识点总结(一)
查看>>
可关闭与最小化的右下角浮动广告代码
查看>>
服务器和数据库基本知识
查看>>
sql自动审核工具-inception
查看>>