移动端网页、公众号兼容性问题记录
每个客户使用的设备都各不相同,所以会出现各种品牌手机样式或者js不兼容的情况,这里我们在做项目中也遇到并记录了各种兼容问题的一些产生与解决方案,避免以后再次出现兼容性问题影响客户体验,同时在代码编写上就提前规避到兼容问题,提高开发效率。
一、iOS中多个position:fixed中z-index失效导致的坑
项目中难免会遇到一些弹框提示,在ios苹果手机,多个position:fixed导致层级关系失效,弹窗无法显示。怎么调试都无法实现(如图),部分苹果手机不会出现此问题。
对于这个兼容性问题这边进行实践后总结出以下解决方案:
方法一:页面上加上 iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致苹果上z-index属性失效,安卓正常 ,将弹性滑动属性的css全局样式-webkit-overflow-scrolling: touch去掉后z-index属性正常。
方法二:写js弹窗出现时,隐藏上层层级的div【底部菜单】;弹窗取消时,显示上层层级的div【底部菜单】
方法三:在出问题的弹框上面添加一下css样式亦可解决问题
transform: 'translateZ(1px)'
二、IOS中搜索输入框获取焦点问题
苹果手机在获取搜索输入框焦点的时候,输入框显示没有背景颜色,没有边框,输入框变的很诡异,用户体验不佳,具体问题如图。
这个兼容问题原因主要是因为ios手机在获取焦点的时候应用了浏览器的默认样式将input的背景色以及边框给变成了白色以至于出现这个问题。解决办法为:
#在搜索框写入如下样式,也可设置为全局样式
input[type='search'] {-webkit-appearance: none;
}
三、移动端页面物理返回上个页面后数据没有更新
部分安卓与苹果手机在移动端网页操作物理返回键返回到上个页面的时候页面上的数据没有更新为最新,导致数据显示错误问题(如图):
在操作物理返回键后,当前页面没有去拉取数据,并没有像后端发送接口,使用的浏览器的缓存逻辑,这样完全不是我们想要的效果。这里有如此解决方案,监听页面‘pageshow’方法,在页面显示的时候进行判断是否是从上个页面返回回来,如果判断成功则进行接口数据拉取,同步最新数据到页面。具体代码如下:
window.addEventListener('pageshow', (e) => {// 使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false// performance.navigation.type [0:点击或url进入; 1:为点击刷新或location.reload; 2:历史记录或前进后退; 255:其他方式]if (isPageHide ||(isDefaultRefresh &&(e.persisted || (window.performance && window.performance.navigation.type === 2)))) {//在此进行数据的重新拉取以及同步到页面显示}
});
四、低版本ios使用html2canvas截图空白以及ios页面滑动后截图空白问题
因业务项目需要,在手机端网页上生成海报图并附带用户信息,这时就需要使用html2canvas进行页面截图生成图片供用户分享。
1、低版本空白
在高版本的ios机器上图片生成功能都一切正常,但是到ios10以下图片生成不了,仔细查找发现是其中代码的写法低版本并不兼容,所以需要在生成图片的时候对用户手机版本进行判断来是使用对应的方法。具体实现代码如下:
html2canvas(this.$refs.imageWrapper, {backgroundColor: null // 解决生成的图片有白边}).then(canvas => {let dataURL = canvas.toDataURL("image/png");let storeAs = "writing" + "/" + this.timeName() + "/" + this.getUuid() + "." + "png";if(this.ios > 9){this.imgFile = this.getBase64Img(dataURL);}else{ //低版本执行方法let bold = this.getBase64Img(dataURL);let file = this.blobToFile(bold, "fileName");}
});getBase64Img: function(file) {let fileName = "writing.png"; //图片名称var arr = file.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}if(this.ios > 9){return new File([u8arr], fileName, {type: mime});}else{ //低版本执行方法return new Blob([u8arr], {type: mime});}
},
//Blob方式获取图片方法
blobToFile: function(Blob, fileName) {Blob.lastModifiedDate = new Date();Blob.name = fileName;return Blob;
},//获取ios版本方法
isIos() {var str= navigator.userAgent.toLowerCase();var ver=str.match(/cpu iphone os (.*?) like mac os/);if(ver){let num = ver[1].replace(/_/g,".").split(".")[0]//console.log("你当前的Ios系统版本为:",num);this.ios = num}
}
2、页面滚动导致的空白
在绘制海报图片中,ios手机如果滚动页面后再进行绘制的话,绘制的图片有一部分会是空白的情况,这是因为图片的绘制是从body开始定位x、y的距离,页面滚动后body已经被向上滑动了,所以会导致图片绘制错误的问题(如图):
具体解决办法是设置html2canvas的参数scrollY:0来固定body的滚动高度。
var myCanvas = document.getElementById('thecanvas');html2canvas(myCanvas, {allowTaint: true,useCORS: true,scrollY: 0,}).then((canvas) => {var imgDataUrl = canvas.toDataURL('image/png');setImgData(imgDataUrl);});
五、1px边框问题
在不同的手机上面,设置1px边框的时候,它展示的宽度也不一样,在个别手机上会显的特别粗,具体解决方法通过把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位来实现。具体代码:
.border{position: relative;border:none;}.border:after{content: '';position: absolute;bottom: 0;background: #000;width: 100%;height: 1px;transform: scaleY(0.5);transform-origin: 0 0;}
六、输入框点击键盘弹起挡住输入框问题
在手机浏览器或者微信公众号中录入数据的时候,当录入到页面底部数据时,点击输入框调起键盘的时候,弹起的键盘会悬浮在页面上,会将我们正在获取焦点的输入框给遮盖掉(如图),这样用户体验很不好。
解决方案:
var inputTextBox = document.getElementById('input-box');setTimeOut(function(){inputTextBox.scrollIntoView(true);},200)
七、IOS系统中日期时间转换问题
在IOS系统日期转换时,不能使用"-“做链接符,如果用”-“做链接符会出现NAN的情况,类似于这种操作: new Date(‘2020-12-23 00:00:00’)。在ios中需要用”/"作为日期的连接符已解决问题。
new Date('2020/12/23 00:00:00')
八、ios的body设置overflow:hidden仍然可以滚动
在部分的ios手机上弹框层的时候给body设置了overflow:hidden禁止body滚动,但是拖动body还是可以滚动,就非常神奇。最后找到解决办法在所有元素最外层再包一个大盒子.wrap然后设置下面的样式再次禁止滚动来实现。
.wrap{position:relative;overflow:hidden;}
九、移动端滚动穿透
在移动端网页中如果有弹出层并且弹出层的内容是可以滚动的情况下,会出现滚动穿透的情况,滚动弹出层的内容后面的body会跟着滚动。实现方法有两种:
方法一、弹出弹框时,使背景主页内容作为固定定位,这样页面的滑动对其就没有任何影响,关闭弹框使,移除这个固定定位的类名,回复正常
<script type="text/javascript">//解决遮罩层滚动穿透问题,分别在遮罩层弹出后和关闭前调用const ModalHelper = ( (bodyCls) =>{let scrollTop;return {afterOpen: function () {scrollTop = document.scrollingElement.scrollTop;document.body.classList.add(bodyCls);document.body.style.top = -scrollTop + 'px';},beforeClose: function () {document.body.classList.remove(bodyCls);// scrollTop lost after set position:fixed, restore it back.document.scrollingElement.scrollTop = scrollTop;}};})('dialog-open');
</script>body.dialog-open {position: fixed;width: 100%;
}
方法二、tua-body-scroll-lock插件的正确使用
使用tua-body-scroll-lock时lock 要加在真正滑动的层上(overflow: scroll/auo;)。如果 unlock 是比较混乱了,可以直接使用 clearBodyLocks。
十、安卓部分版本input的placeholder偏上
安卓部分手机的input框里面的placeholder的提示语显示会跟input没有对齐会向上偏移了一部分。出现这个问题的解决方法是将input的line-height设为normal来解决这个问题。
input{line-height:normal;
}
移动端网页、公众号兼容性问题记录相关推荐
- SAP系统和微信集成的系列教程之七:使用Redis存储微信用户和公众号的对话记录
这是Jerry 2020年的第88篇文章,也是汪子熙公众号总共第269篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
- Java在Web端微信公众号授权登录
Java在Web端微信公众号授权登录 1.需要在微信开发平台配置 url:是自己服务中的微信需要推给你的地址(需要使用二级域名,可以去添加链接描述)购买9块钱1个月使用权或者白嫖都可 token 这个 ...
- 移动端微信公众号页面开发中 使用了footer标签导致页面错位
移动端微信公众号页面开发中 使用了< footer>标签导致页面错位 之前也用过这个标签没出现过此类问题 在微信开发者工具中发现把footer 改成div 样式就正常了
- 一种基于PC端微信公众号的高效采集监测方法
相关阅读: 一套价值十万的微信公众号采集解决方案 史上最快.最笨的公众号文章阅读数.在看数采集,哈哈 Python爬虫实践:如何快速.高效的爬取微信公众号阅读在看数 微信采集之公众号账号信息 最近公司 ...
- 移动端h5公众号网页登录
h5访问地址是一个接口.就是 http://xxx/wx/mpauth private String mpAppid="公众号的appid";private String mpAp ...
- 微信苹果ios端,公众号中打开网页分享无效错误有问题
如果是微信公众号打开首页进去详情页,要分享详情页,要重新在详情页刷新一次
- 网页/公众号音乐下载
文章仅仅为记录学习的小技能 网页音频下载: 1.在google中打开想下载的歌曲(扣扣可以,网易云好像不行),比如 2.F12进入开发者模式,进到Network层级,筛选出Medio类型 3.点击播放 ...
- 云主机配置微信公众号后台全记录 --【 阿里云ECS CentOS7 + Python3 + Flask + Nginx + Gunicorn + WeRoBot + Systemd 】
前言 在天秤座的纠结性格反复权衡后,最终我还是拥有了自己的第一个个人云主机.我这里选择的是"阿里云学生专享服务器",在做学生的最后一年有幸享受到9.5/月的优惠价格,还是要感谢阿里 ...
- 微信公众号页面开发记录
公众号网页在后台配置网页授权地址后修改本地host文件配合本地开发是不生效的. 修改了nginx 配置将测试环境地址指向本地. vue History 路由模式 配置 alias 后按照官网配置配置不 ...
- H5端嵌入公众号后,修改头部标题
在开发H5端的时候,发现使用组件中的van-nav-bar组件,公众号的头部没有嵌入,是空的 针对这个问题在配置路由的时候添加meta属性就可以将标题嵌入到公众号标头中了. export defaul ...
最新文章
- 树状dp(这个人写得好多转来慢慢看)
- Linux Shell 命令--grep
- SQL Server CheckPoint的几个误区
- BoBo接入云信,直播互动“连麦抢麦”分分钟搞定
- DCMTK:读取DICOM数据集的测试程序
- [Python学习] 专题三.字符串的基础知识
- (转载)控制反转(IoC)与依赖注入(DI)
- 程序员求生指南:告别大小周,摆脱监视,直奔年终奖!
- 较为周全的Asp.net提交验证方案(Session版)
- bug篇——generator逆向出现配置文件不存在
- 2019牛客多校第五场C generator 2(BSGS)题解
- ad13批量安装元件库_常用的Altium Designer AD09 AD14 AD18元件库 原理图库(543个)+PCB封装库(509个)...
- 超实用!XRD块状和粉末状样品的制备方法
- 初创企业购买企业邮箱_应用创意可为2019年及以后的初创企业带来收入
- MPLAB X IDE开发环境
- SPI协议主机verilog
- 登录注册功能的实现详解(多用户名注册、案例补充)
- Simulink中传递函数transfer fcn中迟滞参数如何设置
- 卷积神经网络 图像处理,卷积神经网络图像识别
- 小型软件开发团队如何培养人才