移动端兼容--iOS篇

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

记录移动端页面开发中遇到的一些iOS兼容性问题。

禁用虚拟键盘上下箭头

问题描述：虚拟键盘左侧出现上下箭头，点击会导致页面布局错乱

解决方法：设置input的tabindex属性为-1，将上下箭头禁用

微信/企业微信下键盘收起页面不会回到原位置

问题描述：微信下打开网页键盘弹起后页面上滑，键盘收起后页面不会回到原位置，且页面触摸响应错位。

解决方法：focus键盘弹起时保存element的scrollTop，blur键盘收起时回到原位置

1
2
3
4
5
6
7
focus = () => {
    this.scrollTop = getElementScrollTop(scrollElement)
}

blur = () => {
    scrollElement.scrollTop = this.scrollTop
}

Flex布局设置height: 100%无效（iOS 10.3.2）

问题描述：企业微信内置浏览器下，flex-item设置为flex: 1，flex-item-inner为flex-item的子元素，flex-item-inner设置height: 100%无效，没有高度（因设备有限，目前只发现iOS 10.3.2会出现该问题）。

示例：

1
2
3
4
5
<div class="flex-parent">
  <div>...</div>
  <div class="flex-item">
    <div class="flex-item-inner">...</div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-item {
  flex: 1;
}

.flex-item-inner {
  width: 100%;
  height: 100%;
}

解决方法：参考问题Chrome / Safari not filling 100% height of flex parent下这个回答，flex-item添加display: flex，flex-item-inner移除height: 100%。

1
2
3
4
5
6
7
8
9
10
11
12
13
.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-item {
  flex: 1;
  display: flex;
}

.flex-item-inner {
  width: 100%;
}

更多方法参考这个投票最多的回答。上述解决方法对应第四个方法Nested Flex Containers，大致翻译如下：

摆脱百分比高度。 摆脱table属性。 摆脱vertical-align。 避免绝对定位。 坚持使用flexbox。

将display: flex应用于flex项目（.flex-item），使其成为flex容器。这会自动设置align-items：stretch，它告诉子元素（.flex-item-inner）扩展父元素的整个高度。

注意：从弹性项目中删除指定的高度，此方法才能起作用。 如果子元素设置了height（例如height: 100％），那么它将忽略来自父元素的align-items: stretch。 为了使默认拉伸有效，子元素的height必须计算为auto（完整说明）。

时间转换Invalid Date

1
2
3
4
5
6
7
8
let time = new Date('2018-01-01 00:00:00')
// Invalid Date

let time = new Date('2018.01.01 00:00:00')
// Invalid Date

let time = new Date('2018/01/01 00:00:00')
// Mon Jan 01 2018 00:00:00 GMT+0800(CST)

原因：iOS系统不识别YYYY-MM-DD、YYYY.MM.DD格式，能识别YYYY/MM/DD格式

解决方法：将时间字符串中的-替换成/

1
2
let timeStr = '2018-01-01 00:00:00'
let date = new Date(timeStr.replace(/-/g, '/'))

iPhone X适配

参考文章：https://aotu.io/notes/2017/11/27/iphonex/

1
2
<!--viweport-fit 属性，使得页面内容完全覆盖整个窗口-->
<meta name="viewport" content="width=device-width, viewport-fit=cover">
1
2
3
4
5
/*页面主体内容限定在安全区域内*/
body {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

iOS input输入框光标及字体不居中

原因：使用line-height垂直居中

解决方法：可直接定义height，然后高度由上下padding值撑开

iOS 输入框设置readOnly仍会聚焦

  • 方案一

改为设置input的disabled属性

缺点：会使input的点击事件失效

  • 方案二

在input聚焦时失去焦点：

1
2
3
$('input[readonly]').on('focus', function() {
    $(this).trigger('blur');
});

引入fastclick导致输入框难以聚焦

issue: can not bring up keyboard instantly in ios 11.3

解决方法：修改源码或改写fastclick

1
2
3
4
5
6
7
8
9
10
FastClick.prototype.focus = function (targetElement) {
  let 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();
  }
}