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); }

}

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