前言
少侠, 请留步, 相见必是缘分, 赠与你一部踏坑秘籍
扎马步
踏坑第一式
ios 竖屏拍照上传, 图片被旋转问题
解决方案
- // 几个步骤
- // 1. 通过第三方插件 exif-js 获取到图片的方向
- // 2.new 一个 FileReader 对象, 加载读取上传的图片
- // 3. 在 fileReader 的 onload 函数中, 得到的图片文件用一个 Image 对象接收
- // 4. 在 image 的 onload 函数中, 利用步骤 1 中获取到的方向 orientation, 通过 canvas 旋转校正, 重新绘制一张新图
- // 注意 iPhone 有 3 个拍照方向需要处理, 横屏拍摄, home 键在左侧, 竖屏拍摄, home 建上下
- // 5. 将绘制的新图转成 Blob 对象, 添加到 FormData 对象中, 然后进行校正后的上传操作
- // 代码有点杂, 待整理后上传, 网上应该是可以找到的
踏坑第二式
ios:DOM 元素固定一边, 另一边滚动, 滚动很卡的问题
- // (横向滚动用的多些) 简单粗暴的办法, 样式添加如下属性
- -webkit-overflow-scrolling: touch;
踏坑第三式
部分手机第三方输入法会将页面网上挤的问题
- // 特定需求页面, 比如评论页面, 输入框在顶部之类的
- const interval = setInterval(function() {
- document.body.scrollTop = 0;
- }, 100)
- // 注意关闭页面或者销毁组件的时候记得清空定时器
- clearInterval(interval);
踏坑第四式
iPhoneX 适配
- // 1.viewport meta 标签增加属性 viewport-fit=cover
- <meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
- // 2.body 元素增加样式
- body {
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- }
- // 3. 如有 fixed 底部的元素, 也增加上面样式
- xxx {
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- background-color: #fff; // 记得添加 background-color, 不然会出现透明镂空的情况
- }
踏坑第五式
某些机型不支持 video 标签的 poster 属性, 特别是安卓
用图片元素 <img /> 来代替 poster
播放前显示 < img />, 隐藏 <video />
播放后显示 < video />, 隐藏 <img />
踏坑第六式
CSS 透明度颜色设置问题
Android 部分不支持 hex 写法, 推荐用 rgba 的写法
#0000009c --> rgba(0, 0, 0, 0.61)
踏坑第七式
flex 对低版本的 ios 和 Android 的支持问题
使用 postcss 的 autoprefixer 插件, 自动添加浏览器内核前缀,
并且增加更低浏览器版本的配置, 自动添加 flex 老版本的属性和写法
- autoprefixer({
- browsers: [
- 'iOS>= 6', // 特殊处理支持低版本 IOS
- 'Safari>= 6', // 特殊处理支持低版本 Safari
- ],
- }),
踏坑第八式
ios 页面回退到长列表出现灰色遮挡问题
https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/h501.pngdemo 截图
方案 1: 对列表数据进行缓存, 比如 redux 之类的用法
方案 2: 回退时, 跳到页面顶部
- const timer = setTimeout(() => {
- window.scrollTo(0, 1);
- window.scrollTo(0, 0);
- }, 0);
踏坑第九式
ios 日期转换 NAN 的问题
将日期字符串的格式符号替换成'/'
栗子:'yyyy-MM-dd'.replace(/-/g, '/')
踏坑第十式 (React)
未知错误异常, 导致页面崩溃, 空白
React 16.x 增加了 componentDidCatch() 生命周期方法
捕获全局异常来进行页面的友好提示 (具体用法网上有很多资料)
打完收招
晋级还需要多多修炼
来源: https://juejin.im/entry/5abdd8545188255caf0650c2