欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ionic IOS适配的那些坑

程序员文章站 2024-01-21 20:31:28
...

重点说明哈!!

我们单位用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); }

}

解决办法:没解决, 最后变成一张图转了,如果有解决的小伙伴,欢迎下面评论