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

前言少侠，敬请期待，遇见你一定是缘分，送你一份《踏坑秘籍》Zamabutapi第一种ios竖屏图片上传，图片是旋转问题解决方法//几个步骤//1.通过第三方插件exif-js获取图片的方向//2.新建一个FileReader对象，加载并读取上传的图片//3.在fileReader的onload函数，获取图像文件，由一个Image对象接收//4.在图像的onload函数中，使用步骤1中得到的orientation校正画布的旋转，绘制新图像//注意iPhone有3个相机方向需要处理。横屏拍摄，home键在左边，竖屏拍摄，home是上下搭建的//5.将绘制的新图片转换成Blob对象，添加到FormData对象中，然后进行修正后的上传操作//代码有点复杂，整理上传后，网上应该可以找到。第二种ios：DOM元素一侧固??定，另一侧滚动。滚动的问题很卡。属性-webkit-overflow-scrolling:touch;踩坑手机第三方输入法第三部分会在互联网上挤压页面//对于有特定需求的页面，比如评论页面，输入框在最上面等等。constinterval=setInterval(function(){document.body.scrollTop=0;},100)//关闭页面或销毁组件时记得清除定时器clearInterval(interval)；iPhoneX适配第四种踩坑//1.viewportmeta标签添加属性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:const蚂蚁（安全区域插入底部）；padding-bottom:env(safe-area-inset-bottom);背景色：#fff；//记得加background-color，不然会出现透明镂空}步骤坑第五部分机型不支持video标签的poster属性，特别是Android使用图片元素代替poster来显示播放前隐藏