HybridApp开发兼容避坑手册--ios端不支持position:fixed的解决方法

写在前面: 目前团队的项目是开发一个HybridApp混合app,这样做的好处是只需一个前端就能完成一个App移动端多处终端(安卓,ios,pad,微信等)内容的开发,生了很多人力物力,但是在开发的过程中发现ios端对某些html,css和js属性会有兼容问题,当遇到这些问题并且解决后,就来写一些博客来总结这些问题,也希望对遇到同样问题的同学有所帮助

问题描述:position:fixed在android2.2以下(不包含2.2),ios是无效的,而position:absolute是没有问题的,如果用动画去解决,使用到css的transform的话,input,select等编辑框不会移动,还是在原来的位置上,所以建议在写移动端的时候想要固定某个div避免使用position:fixed属性,如果想要用动画去模拟也要注意css3新属性兼容问题,所以建议这时使用position:absolute属性去模拟固定某个div。

解决方案:

HybridApp开发兼容避坑手册--ios端不支持position:fixed的解决方法_第1张图片
image.png

固定图中红色方框时间选择器,只需写一下几行css即可:

.calendar-choice {
     width: 100%;
    position: absolute;
    overflow-y: auto;
    z-index: 9999999;
    -webkit-overflow-scrolling: touch;
}

其实这里z-index属性起到比较关键的左右,当使用 position: absolute固定div是不要忘了加上z-index属性

你可能感兴趣的:(HybridApp开发兼容避坑手册--ios端不支持position:fixed的解决方法)