h5页面在不同iOS设备上的问题总结

女爷i 2022-02-21 14:48 331阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

在做文章评论的功能时，会遇到很多兼容性的问题，在不同机型上的表现也很不一致，总结了以下这些问题。

# 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. ios12在微信小程序的webview，键盘收回，页面底部会留白 #

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

解决方案：滚动一下页面，请[参考链接][Link 1]，代码有效。

# 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: 10px;
    z-index: 1;

# 5. 键盘遮挡输入框 #

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

解决方案： 放弃使用fixed布局，页面如果有滚动，也放弃absolute，如果强行要使用absolute，请参考上一条光标偏移。建议使用flex布局，兼容性会得到解决。

当然，如果遇到以上这些问题，说明产品设计就很不合理，如果必要的话，还是要更换设计，改成input不需要被键盘顶起的设计，这些兼容性的解决方案，也不并不能完美的解决所有机型的问题。

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://blog.csdn.net/qq_23370345/article/details/84757505

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Java代码在不同设备上的兼容性问题

在Android开发中，确保代码的兼容性确实是一个挑战。以下是一些常见的问题和解决办法： 1. 屏幕尺寸差异：Android设备种类繁多，屏幕尺寸不一。使用`resizeab

梦里梦外;/ 2024年09月26日 12:03/ 0 赞/ 66 阅读

相关 H5页面在IOS后退不刷新的解决方法

//将此段代码放入需要刷新的页面即可　　 var browserRule = /^.\((iPhone)|(iPad)|(Safari))+.\$/;

清疚/ 2023年08月17日 17:33/ 0 赞/ 123 阅读

相关 h5页面在iOS上的问题解决

1、ios移动端软键盘收起后，页面内容被顶上去，不下滑回原处代码如下： $(function(){ $('input,textar

超、凢脫俗/ 2023年08月17日 17:33/ 0 赞/ 165 阅读

相关 h5在ios下拉上拉会带动整个页面滑动

html,body,app { width: 100%; // 删掉 height: 100%; // 删掉 backgroun

向右看齐/ 2022年12月08日 05:25/ 0 赞/ 521 阅读

相关混合开发笔记5——h5页面在ios刘海屏适配

h5页面在ios刘海屏适配多种，只总结其中一种（官方适配方案） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

我会带着你远行/ 2022年12月02日 00:44/ 0 赞/ 480 阅读

相关移动端H5页面遇到的问题总结

　　最近刚做完一个移动端的项目，产品之无敌，过程之艰辛，我就不多说了，记录下在这个项目中遇到的问题，以防万一，虽然这些可能都是已经被N多前辈解决掉了的问题，也放在这里，算是为自

╰+攻爆jí腚メ/ 2022年07月11日 09:17/ 0 赞/ 369 阅读

相关 h5页面在不同iOS设备上的问题总结

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

女爷i/ 2022年02月21日 14:48/ 0 赞/ 332 阅读

相关 iOS关于H5和原生页面交互

H5页面调用原生页面，首选JavaScriptCore，JSContext搭配JSExport： - (void)setupJsContent {

た入场券/ 2022年01月19日 22:59/ 0 赞/ 293 阅读

相关手机上调试H5页面

1.在h5页面中引入js文件 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><

超、凢脫俗/ 2021年08月27日 19:50/ 0 赞/ 566 阅读

相关 H5问题总结

很多时候设计稿中的icon很小，但是实际制作页面时，如果这个icon可操作，icon的可操作域应该做大一些，不然在设备中会经常发生操作之后没反应（其实是没有触发在操作域上...

红太狼/ 2020年06月23日 17:33/ 0 赞/ 821 阅读