IOS兼容适配问题：Cordova+vue打包ipa

lq_20101224

已于 2023-01-13 17:01:19 修改

阅读量155

点赞数

分类专栏： ios 文章标签： ios

于 2023-01-13 17:00:41 首次发布

本文链接：https://blog.csdn.net/lq099526/article/details/128676525

版权

ios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何处理移动端的几个常见问题，包括使用fastclick解决input在iOS上的点击延迟和焦点获取问题，针对iPhone11等刘海屏设备的顶部和底部填充适配，处理ios系统中iframe加载白屏问题，以及修复上拉下拉时出现的白色空白区域。

摘要由CSDN通过智能技术生成

1、 input点击两次获取焦点弹出软键盘

// main.js

import fastclick from 'fastclick';

/**
 * 解决移动端点击事件延迟
 */
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function () {
    // input在ios上点击失效，需要多次点击才可以获取焦点
    fastclick.prototype.focus = function(targetElement) {
        var length
        if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
          length = targetElement.value.length
          targetElement.focus()
          targetElement.setSelectionRange(length, length)
        } else {
          targetElement.focus()
        }
    }

    fastclick.attach(document.body);
  }, false);
}

2、iPhone11 刘海屏和底部遮挡适配

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

/* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
  body,
  .layout-top{
      padding-top: constant(safe-area-inset-top, 20px);
      padding-top: env(safe-area-inset-top, 20px);
      padding-top: var(safe-area-inset-top, 20px);
  }
}
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .layout-bottom{
        padding-bottom: constant(safe-area-inset-bottom, 10px);
        padding-bottom: env(safe-area-inset-bottom, 10px);
        padding-bottom: var(safe-area-inset-bottom, 10px);
    }
}

3、ios系统使用iframe出现白屏问题

原因：ios不允许访问外部链接，所以要多需要打开的外链取消限制

在config.xml里面加上代码：

// 引入地图 外部js文件
<access origin="*" />
<allow-navigation href="https://*map*" />
<allow-intent href="https://*map*" />

在index.html里面加上代码：

<meta http-equiv=Content-Security-Policy
            content="default-src *; frame-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval';script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

4、上拉、下拉出现白色空白

原因：按住屏幕上下拖动，会触发 touchmove 事件

<div id="app" @touchmove="handleTouch">
.....
</div>

created() {
    // IOS 上拉 下拉 出现白色空白
    document.body.addEventListener('touchmove', function(e) {
      if (e._isScroller) return;
      // 阻止默认事件
      e.preventDefault();
    }, {
      passive: false
    });
  },

methods: {

    handleTouch (e) {
      e._isScroller = true
    }

  }