1、实现安卓机器流畅滚动功能
-webkit-overflow-scrolling: auto | touch;
auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止
touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
下面是兼容安卓和iOS的写法
over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */
我在非body元素,添加这个属性,竟然没有效果。如果添加上overflow-y: scroll,就可以优雅的滚动起来了。
当一个元素设置过position: absolute|relative,后再增加-webkit-overflow-scrolling: touch;属性后,会发现,滑动几次后就滚动区域会卡住,不能在滑动,这时给元素增加个z-index值就可以了。
解决方法:
给元素增加个z-index值
webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;
2、苹果手机不支持 click 事件
<div class="name">点我</div> $(document).on("click", ".name", function() { alert("name"); });
以上代码在电脑浏览器和安卓上都能触发alert事件,但是在ios上却完全没有反应
查阅了很多信息后,说是iphone这些元素上没有click事件,它是touch事件,
就是说如果这个name标签是button的可click事件则是可以触发的,因为div本身默认不可点击
有一个解决方法是给这个元素添加css
.name{
cursor:pointer;
}
这样是可以解决的
但是如果你觉得粗暴的话,可以将click改为touchstart事件,或者共存
$(document).on(“click touchstart”, “.name”, function() { alert(“name”); });
3、(移动端上)有事件监听的元素被点击的时候会被高亮显示
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
设置 高亮颜色
4、移动端上 会自动改变字体的大小,解决方法
-webkit-text-size-adjust: none
5、扩展点击区域,stylus
// 扩展点击区域 extend-click() position: relative &:before content: '' position: absolute top: -10px left: -10px right: -10px bottom: -10px