ios 与h5之间的交互,安卓和ios对h5页面的适配

　　最近写了一个嵌入小程序webview的h5页面，是评论文章的功能。在这个过程中，我遇到了很多兼容性问题，在不同机型上的表现也很不一致。所以我总结了以下几个问题，记录下来，供以后查看。

　　1、日期问题

　　对于yyyy-mm-dd hh:mm:ss，ios系统不识别这种格式。

　　时间格式化后，在浏览器端处理得很好。到了手机端就变成了NAN，或者null。在这种情况下，ios系统无法转换这种类型的时间。

　　let date=新日期( 2019-02-28 18:33:24 )；//null `解决方法是转换为yyyy/mm/dd hh:mm:ss格式。

　　替换(/\-/g，/)2、键盘收起，页面卡住，不回落

　　在ios12上，当你发现键盘放好了，页面就会卡住，留下底部空白。如果您稍微移动页面，它将被恢复。

　　这种问题，网上已经找到了很多解决方法，大致在模糊事件中。让页面滚动。

　　window.scrollTo(0，scroll)；但是有一个严重的问题：如果页面上有需要操作的按钮，比如评论输入框中的发布按钮，输入文字后点击“发布”并触发click事件，会导致页面先触发模糊事件，键盘会后退，然后一切就结束了。点击按钮没有做任何事情。

　　解决方案：将click事件改为ontouchstart可以解决这个问题。Ontouchstart事件比click事件触发更好。

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

　　此问题可能是由页面的滚动设置自动引起的。

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

　　解决方法：所有兄弟元素成为绝对，父元素溢出：auto

　　父元素：高度：100vh位置：相对；溢出：自动；兄弟元素：位置：绝对；top:0；底部：0；左：0；右：0；溢出-x:可见；溢出-y:自动；填充-底部：10pxz指数：15、键盘遮挡输入框

　　如果输入框固定在底部，当键盘向上推时，iphone上的固定会失效，导致页面滚动输入框随页面滚动，在某些机型上，输入框偶尔会被键盘遮挡。这个偶尔出现的问题很不友好。

　　解决方法：放弃使用固定布局，页面滚动就放弃绝对。如果要使用绝对强制，请参考前面的光标偏移。

　　建议采用Flex布局，兼容性问题会得到解决。

　　当然，如果遇到这些问题，说明产品设计不合理。如果有必要，你应该改变设计，把它改成不需要用键盘顶起输入的设计。这些兼容的解决方案并不能完美解决所有型号的问题。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。