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

Posted 刘镇维

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5手机端开发问题及解决方案相关的知识,希望对你有一定的参考价值。

ios竖屏拍照上传,图片被旋转问题

1.通过第三方插件exif-js获取到图片的方向
2.new一个FileReader对象,加载读取上传的图片
3.在fileReader的onload函数中,得到的图片文件用一个Image对象接收
4.在image的onload函数中,利用步骤1中获取到的方向orientation,通过canvas旋转校正,重新绘制一张新图
注意iPhone有3个拍照方向需要处理,横屏拍摄,home键在左侧,竖屏拍摄,home建上下
5.将绘制的新图转成Blob对象,添加到FormData对象中,然后进行校正后的上传操作

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,不然会出现透明镂空的情况
}

以上是关于H5手机端开发问题及解决方案的主要内容,如果未能解决你的问题,请参考以下文章

跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决

跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决

跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决

前端开发——移动端及响应式布局解决办法总结(适配)

前端开发——移动端及响应式布局解决办法总结(适配)

移动端H5页面适配问题研究