博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
h5页面在不同ios设备上的问题总结
阅读量:5062 次
发布时间:2019-06-12

本文共 1272 字,大约阅读时间需要 4 分钟。

1、日期问题

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

时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种类型的时间。

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

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

  1. replace(/\-/g, "/")

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

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

这种问题,在网上查了很多解决方案,大致是在blur事件中,让页面滚动一下

  1. window.scrollTo(0, scroll);

但是有一个很严重的问题:如果页面上有按钮需要操作 ,例如,评论的输入框+发布按钮,输入完文字,点击“发布”,触发click事件的时候,会导致页面先触发blur事件,键盘回落,然后一切就结束了。。。。按钮点击没有起任何作用。

解决方案: 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发

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

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

解决方案:滚动一下页面,请参考链接,代码有效。 https://blog.csdn.net/qq_23370345/article/details/84757505

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

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

  1. 父元素:

  2. height: 100vh;

  3. position: relative;

  4. overflow: auto;

  5.  

  6. 兄弟元素:

  7. position: absolute;

  8. top: 0;

  9. bottom: 0;

  10. left: 0;

  11. right: 0;

  12. overflow-x: visible;

  13. overflow-y: auto;

  14. padding-bottom: 10px;

  15. z-index: 1;

5、键盘遮挡输入框

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

解决方案: 放弃使用fixed布局,页面如果有滚动,也放弃absolute,如果强行要使用absolute,请参考上一条光标偏移

建议使用flex布局,兼容性会得到解决。

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

 

转载于:https://www.cnblogs.com/gluncle/p/10496056.html

你可能感兴趣的文章
SVN使用教程总结
查看>>
SQL中varchar和nvarchar有什么区别?
查看>>
OpenCV矩阵运算总结
查看>>
Java Build Practice 4:Extend and Invoke Ant API
查看>>
[转] Transformer图解
查看>>
FreeBSD方式安装 MAC OSX
查看>>
Linux 根文件系统制作
查看>>
IOS--沙盒机制
查看>>
使用 JointCode.Shuttle 访问任意 AppDomain 的服务
查看>>
sqlite的坑
查看>>
digitalocean --- How To Install Apache Tomcat 8 on Ubuntu 16.04
查看>>
【题解】[P4178 Tree]
查看>>
Jquery ui widget开发
查看>>
更改git仓库地址
查看>>
有标号DAG计数 [容斥原理 子集反演 组合数学 fft]
查看>>
Recipe 1.4. Reversing a String by Words or Characters
查看>>
Rule 1: Make Fewer HTTP Requests(Chapter 1 of High performance Web Sites)
查看>>
sql注入
查看>>
「破解」Xposed强
查看>>
src与href的区别
查看>>