zoukankan      html  css  js  c++  java
  • Scrolling DIV and Canvas flicker on iPhone/iPad touch

      最近一直在优化一个网站,为了使其能在移动设备上有更好的用户体验,我们做了许多调整,包括将所有的Flash和Silverlight控件替换成HTML5,以及添加一些针对触屏的事件等。在下一篇文章中我会介绍一些针对触屏开发的技巧。

      DIV元素默认的滚动条在iPhone和iPad会消失,其实这个问题不是代码或CSS本身的问题。Apple默认将其系统上所有的滚动条都隐藏起来了,当然这也包括HTML元素。在Apple设备上,默认行为是当用户触摸并滑动屏幕时,所在的元素如果支持滚动条并且滚动条可用,那么将立即显示滚动条并支持滑动。默认情况下滚动条都是不显示的。这里有两篇文章介绍了如何在Apple设备上给DIV添加滚动条。

    http://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html

    http://cubiq.org/scrolling-div-on-iphone-ipod-touch

      几个关键的CSS样式:

    height: 450px;
    overflow: hidden;
    -webkit-overflow-scrolling:touch;

       另外,在Apple设备上,如果页面上有动态生成的Canvas对象并且能响应touch事件,当你用手指点击并在Canvas上滑动时它会莫名其妙地闪烁,要解决这个问题只需要给Canvas对象添加下面这个样式即可:

    -webkit-tap-highlight-color:rgba(0,0,0,0);
  • 相关阅读:
    readystatechange事件
    DOMContentLoaded事件
    beforeunload事件
    jieba
    模型评估
    机器学习术语
    决策树
    kafka
    即时通讯好文
    HTTP头的Expires与Cache-control
  • 原文地址:https://www.cnblogs.com/jaxu/p/3083031.html
Copyright © 2011-2022 走看看