Xcode10.1与Cordova项目,IOS12,输入框遮挡解决(二)

Xcode9.4.1版本升级到Xcode10.1时,很顺利的下进行,但是项目中需要输入框的部分出现问题,在输入时IOS手机的键盘遮挡输入框问题,经过百度搜索,google搜索终于找到解决方法,方法。

解决方法:
①在cordova-ios 项目中安装cordova-plugin-keyboard与cordova-plugin-device插件;
②在JS项目中index.html中写入下面方法:

  (function ios12NotchFix(is_ios, keyboard_plugin_exists){
    if(!is_ios || device.model.indexOf("iPhone")===-1) return false;
    if(!keyboard_plugin_exists) throw new Error("This fix depends on 'cordova-plugin-keyboard'!");
    const iphone_number= Number(device.model.replace("iPhone", "").replace(",","."));
    const /* viewport metatag */
      viewport_el= document.getElementsByName("viewport")[0],
      default_content= "user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1";
    if(iphone_number>=10.6||iphone_number===10.3){ /* devices with notch: X, XR, ... */
      setCover();
      window.addEventListener('keyboardWillShow', setFix);
      window.addEventListener('keyboardWillHide', setCover);
    }
    function setCover(){ viewport_el.content= default_content+", viewport-fit=cover"; }
    function setFix(){ viewport_el.content= default_content; }
  })(device.platform==="iOS", typeof Keyboard !== "undefined");

③在JS中加入以下代码解决不能全屏显示问题

document.querySelector('body').style.height = document.documentElement.clientHeight + 'px';
  document.querySelector('body').style.width = document.documentElement.clientWidth + 'px';
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值