h5页面在不一样ios设备上的问题总结

最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程当中，遇到不少兼容性的问题，在不一样机型上的表现也很不一致，因此总结了如下这些问题，记录下来，以便之后查看

一、日期问题

对于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, "/")
复制代码

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

ios12上，发现键盘收起的时候，页面会卡主，留下底部一片空白，稍微动一下页面，就会恢复。

这种问题，在网上查了不少解决方案，大体是在blur事件中，让页面滚动一下

window.scrollTo(0, scroll);
复制代码

可是有一个很严重的问题：若是页面上有按钮须要操做 ，例如，评论的输入框+发布按钮，输入完文字，点击“发布”，触发click事件的时候，会致使页面先触发blur事件，键盘回落，而后一切就结束了。。。。按钮点击没有起任何做用。

解决方案： 把click事件更换成ontouchstart 能够解决这个问题。 ontouchstart 事件优于blur事件触发

三、ios12在微信小程序的webview，键盘收回，页面底部会留白

这个问题怀疑是页面的scroll设置了auto致使的

解决方案：滚动一下页面，请参考下面连接，代码有效。

网上找的解决方案

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

解决方案： fixed改为absolute， 全部兄弟元素变成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;
  z-index: 1;
复制代码

五、键盘遮挡输入框

输入框若是使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，致使页面滚动输入框会随着页面滚动，而且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好

解决方案：

一、放弃使用fixed布局，页面若是有滚动，最好也放弃absolute，若是强行要使用absolute，请参考上一条光标偏移

二、使用flex布局，并不完美，但也算一个解决办法

利用flex布局解决ios输入框被键盘遮挡问题

固然，若是遇到以上这些问题，说明产品设计就很不合理，若是必要的话，仍是要更换设计，改为input不须要被键盘顶起的设计，这些兼容性的解决方案，也不并不能完美的解决全部机型的问题。这些问题的存在，不是咱们的错，但愿遇到问题的同窗，不要否认本身，多沟通，同时努力引导产品成为一个好产品。