平时在PC端开发页面，通过CSS样式的hover就可以实现按钮的效果，但转移到手机移动端是就无法实现了，如何解决呢？
.abc{border:0; width:480px; height:170px;
transition: width .2s;
-moz-transition: width .2s; /* Firefox 4 */
-webkit-transition: width .2s; /* Safari 和 Chrome */
-o-transition: width .2s; /* Opera */
}
.abc:active
{
width:450px;
}
<img src="images/pad-1.png" class="abc" />
以上是CSS代码和图片绑定的abc样式。但是转到移动端就没有效果了，如何实现呢？添加以下代码就可以解决：
<script>
document.body.addEventListener('touchstart', function (){});
</script>
一般能在网上查到的解决办法都是这个，但大都容易忽略一个问题
<body touchstart>
一定要在body中加入touchstart才能真正有效果。
以上就是移动端iPad浏览器Safari按钮动态按压效果的详细内容，更多关于移动端iPad浏览器Safari按钮动态按压效果的资料请关注九品源码其它相关文章！