移动端兼容性问题
1.父元素使用了transform,子元素position:fixed失效的问题
问题描述:我的页面中有个这样的需求,点击定位,页面从右向左拉出一个菜单,覆盖整个屏幕,这个滑动效果我是用transform写的,可以选择省,但是上面当前位置和取消所占的一行要求position:fixed,下面的省可以滚动,效果如下图:
结果就是position:fixed失效了,因为他的父元素运用了transform
解决办法:改变布局,让需要position:fixed的元素变成transform元素的兄弟元素,而不是子元素,这样就解决了,如果有更好的解决办法,欢迎大家踊跃发言告知,在此感谢!
2.移动端加了overflow:auto导致滚动不流畅的问题
问题描述:不知道大家开发移动端的过程中有没有需要加overflow-x:hidden;overflow-y:auto;类似这种的情况,加了以后发现滚动变得不流畅了。
解决办法:只需要给你加了overflow:auto的标签(例如class=“list”)加上一个神奇的css属性即可:
.list{
-webkit-overflow-scrolling:touch;
}
3.input获得焦点软键盘弹出时,position:fixed的footer遮挡内容区域的问题
问题描述:页面中footer是position:fixed的,页面中的input获得焦点,软键盘弹起后,我希望footer隐藏,避免遮挡内容区域。
解决办法:针对ios型号设备,可以通过input获得焦点还是失去焦点来判断,因为ios型号设备软键盘收起时,input会自动失去焦点,而安卓却不一定,安卓必须是点击页面的其他地方,input才会失去焦点,而直接点击软键盘上的完成或者关闭按钮,input不会失去焦点,所以针对安卓,需要使用resize方法,因为对于安卓设备来说,软键盘的弹出和收起,都会触发resize方法。
//ios
$("input").bind("focus", function(){
$("footer").hide();
}).bind("blur", function(){
$("footer").show();
})
//安卓
var windowHeight = $(window).height();
$(window).resize(function(){
var nowHeight = $(window).height();
if(nowHeight < windowHeight){ //说明软键盘弹出
$("footer").hide();
}else{ //软键盘收起
$("footer").show();
}
})
4.ios型号设备下输入框默认内阴影
解决办法:
input {
-webkit-appearance: none;
}
移动端弹层水平垂直居中方法
.layer{
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
动画效果
1.移动端弹层从右往左划出效果CSS实现
.layer{
position: fixed;
right: 0;
top: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.layer.in{
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
2.移动端弹层从下往上划出效果CSS实现
.layer{
position: fixed;
bottom: 0;
left: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.layer.in{
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}