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

原文地址:https://www.cnblogs.com/liuzhenwei/p/8691804.html

时间: 2024-10-10 01:25:05

H5手机端开发问题及解决方案的相关文章

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev

Ueditor百度富文本编辑器添加h5手机端预览功能

一.需求分析 项目中用到富文本编辑器的地方很多,富文本编辑器一般都是在pc后台上,因为前端是手机端,因此每次再富文本编辑内容保存以后,在手机端展示的样式和我们在富文本中编辑的不太一样,因此就需要在编写完内容之后可以模拟手机端进行预览一下,但是后端用富文本编辑器的地方比较多,不适合在每个页面进行开发,因此做成插件功能放入ueditor之中的方式改动的代价比较小. 首先看下效果 二.代码 先在ueditor.css中添加按钮样式图片: 路径:ueditor\themes\default\css\ue

关于h5手机端上拉加载和下拉刷新效果-1

1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/ 3.今天在上班,等晚上我再详细介绍一下,么么哒..

0512日重点:淘宝的H5手机端自适应解决方案:Flexible

参考文档: https://github.com/amfe/lib-flexible https://github.com/amfe/article/issues/17 自我总结:Flexible自动获取到手机的屏幕宽度,然后分成10份,1个rem=1/10屏幕宽度.然后所有的px转换成rem. 转换时有插件可以帮忙快速转换.

手机端开发

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&

手机端开发笔记-迭代记录

1.防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport 视口 有些手机网站我们看到如下声明: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 设置了DTD的方式是XHTML的写法,假如我们页面运用的是 html5,可以

[共通]手机端网页开发问题及解决方法整理

Q1:手机端开发网页,界面适应问题.A1: <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> width - viewport的宽度 height - viewport的高度    initial-scale - 初始的缩放比例    minimum-scale - 允许用户缩放到的最小比

专注手机端前端界面开发的ui组件和js组合

frozenui一款腾讯开发的简化版Bootstrap,只用于手机端 http://frozenui.github.io/ https://github.com/frozenui/frozenui zepto.js专注于手机端开发的js库 http://www.zeptojs.cn/            官方文档 http://www.css88.com/doc/zeptojs/         在线文档