移动端开发ios下遇到的坑

最新推荐文章于 2025-09-04 18:43:54 发布

转载最新推荐文章于 2025-09-04 18:43:54 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/horizon-jens/p/9646535.html

文章标签：

#移动开发 #javascript #ViewUI

本文深入探讨了移动端开发中常见的技术难题，包括position:fixed在iOS系统下的异常表现及解决方案，JavaScript日期对象在iOS下的兼容性问题，以及事件委托在不同设备上的差异处理。文章提供了实践经验和代码示例，帮助开发者规避常见陷阱。

position: fixed引发的问题

在开发移动端页面时，尽量少使用固定定位布局，因为会在ios系统上引发一系列不可控的状况，比如
1.使用fixed定位的元素会随着页面的滑动而抖动；
2.页面滑动失去惯性；
3.可能在滑动过程中引发瞬间的页面错乱，停止后恢复正常；
在需要使用fixed定位的时候，就与主体页面分离，保证层级关系，不影响主体页面。
tips：-webkit-overflow-scroll:touch 属性也不能与fixed定位一起使用

new Date( )的bug

ios系统下，javascript的日期对象Date( )函数不能识别短横杠：“ - ” ，只能使用斜杠：“ / ”

// 以下形式 ios可以识别
let date = new Date("2018/09/14");

// 以下形式 ios不能识别
let date = new Date("2018-09-14");

事件委托的坑

最近维护老项目，使用jquery的on( )写事件委托，安卓下可以点击，ios下不可点击。

// 改方法下ios下点击无效
$("body").on("click", "#first-login .first-login-btn", function () {
    $("#first-login").hide();
})

//改成touchend事件可以点击
$("body").on("touchend", "#first-login .first-login-btn", function () {
    $("#first-login").hide();
})

回头查询一下，当使用事件委托给【目标元素】添加 click 事件时，如果【代理元素】是 document或body，并且【目标元素】是默认不可点击的（如 div, span 等），此时click事件会失效。如果【目标元素】是可点击的（比如 button、a 标签），此时click事件还是有效的。
解决方案可以替换click事件，或者给【目标元素】设置cursor: pointer;

转载于:https://www.cnblogs.com/horizon-jens/p/9646535.html