移动端
开发项目过程中移动端遇到的一些问题解决记录
无敌无敌小可爱
摆烂一时爽
展开
-
html2canvas在ios中文字错乱重叠
一、问题出现之前有给项目加水印的需求,是好多年前的旧项目,直接引入js的方式,加了水印过之后没有修改过但是测试反应出现了文字重叠的问题:正常水印:文字错乱水印:细心的小伙伴已经看出来错乱水印中的”术“和”海)“都向上偏移了并且偏移位置仍保留空白位置。二、解决问题怕是受到了什么样式的影响,把生成水印的源元素上的样式都去掉了还是有问题,思来想去,灵光一现:是不是版本问题。因为新项目里通过装包引入的方式是没有问题的。替换了旧版本的js之后果然解决了问题,害我之前还试了好多种text-alig.原创 2021-08-08 14:53:24 · 4356 阅读 · 6 评论 -
安卓手机调整系统字体大小之后影响html2canvas中的文字
一、发现问题之前做的h5项目中使用html2canvas给图片加水印的功能,查看用户上传的图片时发现文字拥挤字体变大,尝试了扁宽和细长的图片都没能复现,灵机一闪:会不会不是图片的问题,是不是系统字体影响的?(我可真是bug杀手)。设置系统字体特大号之后果然出现了略显拥挤的文字。二、解决问题既然找到了问题就好办了。ios中调整系统字体不会影响html2canvas,可以加以下样式以防万一:body { -webkit-text-size-adjust: 100% !important原创 2021-05-27 17:16:00 · 1280 阅读 · 9 评论 -
移动端拍照上传图片之后压缩以及图片旋转问题
一、问题针对旧项目翻新,旧的项目是使用lrz(官网)插件压缩图片,17年的项目了使用原生js写的,要翻成vue+webpack,同样使用lrz压缩图片时在部分小米手机和ios就会出现图片旋转的问题,其实不压缩图片时图片就是旋转的,就想有没有一个压缩组件又可以压缩又可以解决原本图片的旋转问题。二、解决最终找到了这个宝藏组件compressorjs,可以兼容安卓和ios解决旋转问题,其实在这之前试了lrz-lw等压缩组件可以解决ios的旋转但是小米手机一直不行。可以使用测试链接来拍照上传看看是否兼容原创 2021-04-22 14:39:40 · 681 阅读 · 2 评论 -
html2canvas页面滚动时截图不全空白问题
一、问题h5项目中有给上传的图片加天气、地理位置等水印信息需求,本来想用cavas画,但是代码又长又臭,样式也不那么灵活。然后想到用html2canvas,我可真是个小机智。在页面内容不多的页面上没有问题,效果也不错,但是内容很多会滚动的页面就出现了截掉一半内容的情况。这是为什么呢?二、解决一番查找之后,在官网看到了scrollY属性,这个属性官网注解是渲染元素时要使用的y轴滚动位置(例如,如果元素使用位置:fixed),我要截图的元素正是fixed定位的,所以截图渲染的时候元素在画布上相对Y轴原创 2021-04-20 16:14:17 · 2356 阅读 · 0 评论 -
移动端适配终极大招
前端工作至今终于找到一个比较理想的适配方案,觉得颇为好用,特来分享。原文链接:https://www.w3cplus.com/mobile/vw-layout-in-vue.html原文作者讲解很是详细(我看到的时候还没有收费哈哈哈),特意总结记录一下,项目建立在vue基础上,vue起步可以看这篇文章。注:此篇文中用到的vue-cli已有更新的版本,可自行到官网查看学习。主要总结一下需...原创 2018-10-25 19:23:46 · 279 阅读 · 0 评论 -
vue中h5项目怎么使用weui
注:项目使用vue cli脚手架,最新版脚手架创建项目参考这里一、安装weui安装weui js文件和css文件:cnpm i weui.js weui --S二、将文件引入项目中在main.js中添加如下代码:import weui from 'weui.js'import 'weui'Vue.prototype.$weui = weui三、页面中使用具...原创 2018-11-29 16:17:35 · 5905 阅读 · 0 评论