移动端开发常见问题及解决方案

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
}