h5页面在不同ios设备上的问题

1、日期问题

对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。

let date = new Date('2019-02-28 18:33:24');    // null`

解决方案是，转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了

replace(/\-/g, "/");

2、键盘收起，页面卡住，不回落

ios12上，发现键盘收起的时候，页面会卡主，留下底部一片空白，稍微动一下页面，就会恢复。这种问题，在网上查了很多解决方案，大致是在blur事件中，让页面滚动一下。

window.scrollTo(0, scroll);

但是有一个很严重的问题：如果页面上有按钮需要操作 ，例如，评论的输入框+发布按钮，输入完文字，点击“发布”，触发click事件的时候，会导致页面先触发blur事件，键盘回落，然后一切就结束了。。。。按钮点击没有起任何作用。
解决方案： 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发

3、启动画面

iOS下页面启动加载时显示的画面图片，避免加载时的白屏。可以通过madia来指定不同的大小：

<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

4、iphone fix 失效，导致一些机器上textarea光标偏移

解决方案： 所有兄弟元素变成absolute， 父元素overflow:auto;

父元素：
父元素：
height: 100vh;
position: relative;
overflow: auto;

兄弟元素：
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x:visible;
overflow-y: auto;
padding-bottom: 10 px;
z-index: 1;

5、键盘遮挡输入框

输入框如果使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，导致页面滚动输入框会随着页面滚动，并且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好。
解决方案： 放弃使用fixed布局，页面如果有滚动，也放弃absolute，使用flex布局。

6、IOS键盘字母输入，默认首字母大写

解决方法：

<input type="text" autocapitalize="off" />

7、OS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

解决方法：
通过正则去除

this.value = this.value.replace(/\u2006/g, '');