1.移动端左右滑动右侧有留白
出现这种问题的话查看一下自己的css中有没有用到position:relative或者position:absolute,我做页面的时候经常遇到这个问题,百分之一百是这个原因。
只要设置html,body的width为100%,overflow:hidden就可以了。
2.ios点击事件无效果的几个方案
1)为css添加cursor:pointer;
2)动态添加的元素要使用on绑定事件。
3)查询是否引用了js文件
3.设置animation动画安卓没有效果
为keyframes、animation、transform添加-webkit-前缀,缺一不可
4.设置了div高度为百分比不起作用
检查htnl,body{height:100%}
5.ios使用on绑定click事件出现绑定父标签闪烁的问题
给该元素一个样式如下:-webkit-tap-highlight-color: rgba(0,0,0,0);
6.解决前端移动设备不兼容问题
使用@media设置设备尺寸,分尺寸设置css,格式如下:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : Portrait ) { }
7.iphone移动端click事件延迟300ms解决方案
1)禁止缩放:<meta name="viewport" content="width=device-width, user-scalable=no">
2)引用FastClick.js文件,window.addEventListener( "load", function() { FastClick.attach( document.body );}, false );
8.防止点透事件
为上层元素的点击事件添加 return false;
--------------------------------------------------------2021年更新---------------------------------------------------------
1. iphonex 键盘收起时页面滚动不恢复
解决:键盘收起和打开时window.scroll(0, 0);
2. canvas 绘图方法及安卓手机出现绘图不准解决方案
解决:使用惰性加载(延迟加载)方法,在调用 ctx.draw(false,function(){}) 的回调函数部分,使用 setTimeout 延迟获取 canvasToTempFilePath 可以避免 canvas 在安卓机器上绘制不全的情况
参考资料:https://blog.csdn.net/h357650113/article/details/81189370
3. ios端页面滚动出现卡顿的原因之一
解决:如果给body或html设置了高度100%,ios端会出现图片滑动卡顿,将height去掉就好了
4.ios端路由不变导致wx签名验证不通过和图片长按不能正常识别
解决:在需要控制路由正确的页面加路由守卫,代码如下、
5.ios端上传图片,在android端会颠倒90度显示
解决:配置oss style ,后端需要为每个图片url增加后缀,例如http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/orient
其中orient是oss style的命名
6.ios端new Date('2018-01-01') 不能使用‘-’作为连接符
需改成‘/’(可兼容android端)
7.html2canvas转图片,设置字体不管用,变为默认字体
使用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染,对于html中的文字会转换成对应的 unicode码,再根据HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体@font-face ,则加载对应字体文件)对应字体的字体文件,找到文件后根据 unicode 码去查找绘制外形,找到后绘制到页面上。
解决方案:font-family: "\9ED1\4F53"; (将字体转成unicode码显示)
8.小程序input安卓机弹窗显示的组件focus自动聚焦不管用
使用变量动态控制
<input :focus="focusValue" v-model="password" @input="changeInput">
...
open(){
...
// 弹窗弹起时将focusValue置为true
this.$nextTick(()=>{
this.focusValue =true
})
}
close(){
...
// 弹窗关闭时将focusValue置为false
this.focusValue =false
}