手机固有 bug
某些手机上 fixed 元素在页面滚动时会消失
使用局部滚动, 而不是整页滚动
某些 iOS 设备上触发不了点击事件
在元素上加 pointer:cursor
iOS 设备上点击事件有 300ms 延迟
两种方法, 一是使用 fastclick.JS(推荐). 二是不绑 click 事件, 绑在 tap 事件上(此方法会导致开发时调试困难, 模拟设备模式下触发 tap 有 bug)
iOS 设备上 fixed 元素在键盘弹起时位置会变幻不定
没有很好的解决方案, 应从产品设计层面避免这种情况(比如说做转场页面等)
在弹窗上滑动时底部页面也跟着动
在弹窗上需要滚动的地方使用 Swiper https://www.swiper.com.cn/ , 不需要滚动的地方加 ontouchmove="event.preventDefault()"
某些 iOS 设备上页面滚动时不会连续触发 scroll 事件
绑在 touchmove 事件上, 但手指离开屏幕惯性滑动这段时间还是无法触发, 如果确实需要精细控制, 可考虑 IScroll.JS https://GitHub.com/cubiq/iscroll
浏览器刷新页面后会记忆之前的滚动条位置
这通常可以提升用户体验, 但有时我们需要禁止这种记忆, 加上下面两行
- history.scrollRestoration = 'manual'
- Windows.onunload = () => Windows.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 = Windows.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