文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面,安卓软键盘遮挡问题

2023-09-07 07:10

关注

一、IOS使用Vant表单组件输入框获取焦点后放大页面问题

使用Vue+Vant做的移动端项目,在登录界面使用Vant的表单组件van-input时发现在真机测试IOS会出现获取焦点输入时会撑大原页面的宽度,每一个输入框获取到焦点就会页面就会放大一点点,需要双指缩放才能回到原来的比例。

经过一番百度后发现:

在移动端开发项目中,发现页面在使用 iPhone 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大,而且失去焦点之后页面不能返回原来的样子。
手指双击页面时候也会放大
检查了下,功能上没有什么大问题,但是页面会整体放大,而且失去焦点之后页面不能返回原来的样子。用户体验不好
最后找到原因:苹果觉得点击输入框放大是一个“很好”的体验,就擅自把页面给放大了

原文链接:IOS移动端,表单input聚焦时页面放大的解决办法_祈澈菇凉的博客-CSDN博客

解决方法也是参考原po,在public/index.html文件加上

initial-scale属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。

maximum-scale属性控制允许用户缩放到的最大比例。

minimum-scale 属性控制允许用户缩放到的最小比例。

user-scalable 属性控制用户是否可以手动缩放。

(来自原po,仅作记录) 

修改meta后IOS没有再出现需要手动缩放这个问题了。

二、van-tab-line活跃状态样式出现问题

如图,因为项目使用的是van-tab切换账号登录和手机号登录,修改meta后发现标签下方的van-tab-line样式出现错乱,但是切换tab之后样式又没有问题了。调试后发现是van-tab-line的transform属性的值出现问题。因为暂时没有找到安卓和ios共同适配的transform的数值,所以直接改为设置活跃tab的border-bottom替代vant原来的van-tab-line

最终效果:

 

 

 三、安卓软键盘遮挡问题

安卓输入框获取焦点后弹出软键盘,软键盘会遮住下面的输入框,看了网上很多的解决方案, 但是resize事件不生效……= =最后决定采用了比较暴力的方法 

首先判断设备:javascript - 可能这些是你想要的H5软键盘兼容方案 - 个人文章 - SegmentFault 思否

var judgeDeviceType = function () {  var ua = window.navigator.userAgent.toLocaleLowerCase()  var isIOS = /iphone|ipad/.test(ua)  var isAndroid = /android/.test(ua)  return {    isIOS, isAndroid  }}data () {    return {        deviceType: judgeDeviceType(),    }}

 然后在当前页面包裹的div动态绑定样式

这个changeBottom就是软键盘的高度,默认是0px

当输入框获取到焦点(触发focus事件)时,通过changePaddingBottom方法改变changeBottom的值,产生滚动条让滚动条滚动到底部

              
    changePaddingBottom() {      if (this.deviceType.isAndroid) {        clearTimeout(this.timer1)        this.changeBottom = '75%'        if(app.scrollTop === 0) {          this.timer1 = setTimeout(() => {            app.scrollTo(0, app.scrollHeight)          },50)        }      }    },

最终效果

 如果有更好的方法请在评论区留言,感激不尽~

来源地址:https://blog.csdn.net/Weiqian_/article/details/130122608

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯