H5手机端开发问题汇总及解决方案

lucas 发布于2019-08-02 10:03 / 2900人阅读

摘要：方案回退时，跳到页面顶部。踏坑第九式日期转换的问题将日期字符串的格式符号替换成。欢迎感兴趣的各路武林豪杰加入。

前言

少侠，请留步，相见必是缘分，赠与你一部《踏坑秘籍》

扎马步 踏坑第一式

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

// 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属性，特别是安卓

 用图片元素 来代替poster
 播放前显示，隐藏

踏坑第六式

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 页面回退到长列表出现灰色遮挡问题

方案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() 生命周期方法
捕获全局异常来进行页面的友好提示（具体用法网上有很多资料）

打完收招

晋级还需要多多修炼

前端攻城狮②群：592688854。欢迎感兴趣的各路武林豪杰加入。

云服务器 GPU云服务器手机端webrtc h5 云服务器问题及解决方法手机端安卓开发 html5开发手机端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52092.html

H5手机端开发问题汇总及解决方案

摘要：方案回退时，跳到页面顶部。踏坑第九式日期转换的问题将日期字符串的格式符号替换成。欢迎感兴趣的各路武林豪杰加入。前言少侠，请留步，相见必是缘分，赠与你一部《踏坑秘籍》扎马步踏坑第一式 ios竖屏拍照上传，图片被旋转问题解决方案 // 几个步骤 // 1.通过第三方插件exif-js获取到图片的方向 // 2.new一个FileReader对象，加载读取上传的图片 // 3.在f...

Codeing_ls 2019-08-30 14:18 评论0 收藏0
H5手机端开发问题汇总及解决方案

摘要：方案回退时，跳到页面顶部。踏坑第九式日期转换的问题将日期字符串的格式符号替换成。欢迎感兴趣的各路武林豪杰加入。前言少侠，请留步，相见必是缘分，赠与你一部《踏坑秘籍》扎马步踏坑第一式 ios竖屏拍照上传，图片被旋转问题解决方案 // 几个步骤 // 1.通过第三方插件exif-js获取到图片的方向 // 2.new一个FileReader对象，加载读取上传的图片 // 3.在f...

Jaden 2019-08-22 15:53 评论0 收藏0
H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0