移动端fixed定位固定在底部 ios手机里为啥会遮住一半 css

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端fixed定位固定在底部 ios手机里为啥会遮住一半 css相关的知识,希望对你有一定的参考价值。

参考技术A fixed 不占据文档流。 你可以让body padding-top 一个底部foot的高度就行了本回答被提问者采纳 参考技术B fixed固定在底部的是不是input标签?

移动端开发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;







以上是关于移动端fixed定位固定在底部 ios手机里为啥会遮住一半 css的主要内容,如果未能解决你的问题,请参考以下文章

移动端弹窗滚动时,底部盒子跟着一起滚动

关于移动端底部定位问题

RN设置Image图片固定在底部位置

iPhone界面为啥会覆盖

解决iOS 底部fixed后 页面滑动后无法点击的问题

移动端开发ios下遇到的坑