Ionic IOS适配的那些坑
重点说明哈!!
我们单位用Ionic 只是开发纯Web的网页,并非混合框架!并且我们开发出来的网页,需要适配Android和IOS手机的那种。
下面是我遇到的那些个坑!!这里面的有些坑 有可能不用Ionic框架也会碰到,具体是哪个,我并没有去实验。小伙伴们可以自行感受。
1.IOS 中单行输入框输入内容长被遮盖,不能显示全部,且不能左右滑动。(貌似不是框架的事,可能都有这个问题,我没去验证)
解决办法:可以考虑用 textarea 替换 input,设置一行的高,进行上下滚动查看。
2.IOS 用[(ngModel)]绑定变量,中文输入法输入英文,然后直接点击软键盘右上角的完成,取不到值的问题。
解决办法:如果你用的是表单,那么你可以用“表单验证”的那些东西去取到值,官网链接是https://angular.cn/guide/form-validation,又或者是采用“id等各种选择器的方式去取值”(虽然古老,但是可用)。
3.IOS右滑手势和页面的回退冲突。
解决办法:如果你的页面里面没有什么需要滑动的效果,你可以采用“禁止掉滑动手势”的方式避免这个问题;如果你有滚动的效果,那就需要和产品/测试/项目经理协调一下,看看怎么改一下需求,或者不改。
“禁止掉滑动手势”的代码在下面(可以写在Ionic的入口文件 index.html里面,可以做到全局生效)
var startX,startY;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
})
document.addEventListener("touchmove",function(e){
let moveX = e.targetTouches[0].pageX;
let moveY = e.targetTouches[0].pageY;
if(Math.abs(moveX-startX) > Math.abs(moveY-startY)){
console.log("Math.abs(moveX-startX) > Math.abs(moveY-startY");
e.preventDefault();
}
},{passive:false})
4.Android 设置字体粗度的时候 失效!。(你可能是这样写的 font-weight:600,发现不好用)
解决办法:加粗改成 font-weight:bold ????
font-weight: bold;
5.IOS div设置click事件,点击有延迟或者点击两次才能进入。
解决办法:把需要加点击事件的元素 外面套上<a>标签或者 改成button按钮的形式、或者加上tappable属性(例子如下)
<div class="add-img-new" tappable (click)="divideChannel()">
6.当需要用 css animation 来切换一部分的图片。就是下面代码这样,IOS端会发生出不来动画效果的情况。
@keyframes rotate{
0% { background-image: url(../images/a.svg); }
100% { background-image: url(../images/b.svg); }
}
解决办法:没解决, 最后变成一张图转了,如果有解决的小伙伴,欢迎下面评论
上一篇: 基于SSM实现过滤器及拦截器功能,并实现角色权限功能
下一篇: php设计模式 - 工厂模式