IOS兼容问题汇总

IOS兼容问题汇总

Q:position: fixed 无效
A:flex布局

将整体页面一分为二，头部跟内容区，flex方向为垂直即可

.view {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}
.header {
    
}
.content {
    overflow-y: scroll;
}
Q:ios下拼音输入不触发vue双向绑定
R:原因是IOS自带输入法输入中文时不触发KEYUP事件，因为不触发KEYUP事件，没有执行双向绑定
A:提交前进行手动绑值
      //  ios 下拼音输入不触发双向绑定手动绑定
   const u = navigator.userAgent;
   const isiOS = !!u.match(/\(i[^;]+;( U;)? 			CPU.+Mac OS X/);
   if(isiOS){
     if(this.userInfo.wechat != 					this.$refs.wechat.value){
      this.userInfo.wechat = this.$refs.wechat.value
        }
        }
Q:IOS滚动兼容
R:IOS原生滚动问题
A:使用better-scoll插件进行滚动处理
tag:如果滚动区域内部有v-if控制的地方，为防止复用导致出现问题，要将key设为不同的值

https://better-scroll.github.io/docs/zh-CN/

Q:IOS全屏高度问题
R:IOS设置 100vh 会受到顶部导航和底部导航影响
A:不要使用100vh，改为top:0,bottom:0。
Q:IOS实现上下固定，内容滚动
A:整体页面设置绝对定位 top:0，bottom:0,采用flex布局，上下设置固定高度，中间内容区域flex:1，overflow:hidden,滚动使用better-scroll插件即可。
posted @ 2021-06-18 14:09  ymzi  阅读(206)  评论(0)    收藏  举报