移动端页面中遇到的iOS bug

最新推荐文章于 2023-11-24 14:46:42 发布

呆毛社社员LOST

最新推荐文章于 2023-11-24 14:46:42 发布

阅读量1.4k

点赞数

分类专栏： javascript css 文章标签： IOS H5

本文链接：https://blog.csdn.net/u010690493/article/details/90231022

版权

javascript 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

吐槽

~~由于咱家穷，都是用的土鳖的安卓机，然后每次测试的时候，都出一堆意想不到的问题orz，这时候我的心情是非常郁闷的~~

~~不对啊，我手机上没问题啊。不信你看！~~

~~这时候，对方掏出了象征高贵身份的ihpone~~

~~你看我手机上就有问题，你这样不行，要考虑兼容性~~

~~这我就更难过了。所以才有了这个文章~~

正文

以下是正文。

getTime()，getFullYear()等方法返回NaN

因为前台显示时间，有时候需要对时间日期进行格式化，就调用了这些方法，但是iOS并不支持这些方法。怎么办呢。
这是在其他网站上找到的方法

所以想要正确显示时间在iOS上，应该这么写

new Date(“2018-02-15 20:30:00”.replace(/-/g,’/’)).getTime(); // 解决了问题！！

> 当然getFullYear() ,getMonth(),getDate()已需要这样写：
> ```
new Date("2018-02-15 20:30:00".replace(/-/g,'/')).getFullYear()

还有种方法就是使用一个叫momentjs的第三方插件。

伪类选择器:active无效

有时候移动端页面需要做一些按键反馈啥的，首先想到的就是伪类选择器。
然而自己手机上好好的，iOS上又不行了。因为在iOS种，需要一串js代码激活这个行为才行

document.addEventListener('touchstart', function(){})

加上去果然行了

input框要多次点击才弹出手机键盘

这问题困扰了我一天。最后是一位dalao帮我解决了。
因为我页面用了fixed布局，ios手机键盘弹起导致input无法聚焦，只需要在blur的时候让页面回到初始的位置就行了。参考代码

function onBlur() {
  var currentPosition, timer;
  var speed = 1; //页面滚动距离
  timer = setInterval(function() {
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
    clearInterval(timer);
  }, 1);
}