网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了。在 Android 3.0 之前以及 iPhone OS 3.0 之前的自带浏览器中,你无法用手指拖动该元素所在区域,这样就相当于 overflow: hidden 了。在 Android 3.0 中,这个问题解决了,但是该溢出区域不会显示滚动条。而在 iPhone OS 3.0 中这个问题却是以另一种方式解决:我们只能用两个手指拖动溢出区域,而且该区域同样不会显示滚动条。一直到了 iOS 5.0,苹果公司才完整解决了这个问题,这时候可以单指拖动,而且可以通过设置 CSS 属性 -webkit-overflow-scrolling: touch; 以显示滚动条。

对于早期 Android 和 iOS 的这个问题,导致很多用户可能就不知道该区域可以拖动。为满足触屏用户,我们针对桌面浏览器设计好的页面布局,就需要作适当的调整。最简单的做法是改用 height:auto,如果此法不可行可以用 iScroll 4 这个 JavaScript 库。

对于 iframe 元素,也有类似的问题。我们可以将它放在一个大小确定的 div 中,并且设置该 div 的属性为 overflow:auto; -webkit-overflow-scrolling: touch; 。当然,iframe 元素也必须设置样式为 display:block; width: 100%; height: 100%;

对于非自带浏览器,Chrome for Android 是支持拖动溢出元素,而且开始也支持 -webkit-overflow-scrolling: touch; 属性,但是最近删除了这个属性。其它浏览器例如 Firefox Mobile 或者 Opera Mobile,有待测试。

参考资料:
[1] Div Overflow and iPhone Browsing
[2] Issue 6864 - android -Web browser - Inner Scrolling - Android
[3] Scrolling a overflow:auto; element on a touch screen device
[4] Android browser bug? div overflow scrolling - Stack Overflow
[5] Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决 - Cat的日志
[6] New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support
[7] scroll - Two finger iPhone scrolling - Stack Overflow
[8] Chrome Browser for Android no longer supports -webkit-overflow-scrolling?
[9] Strategies for the iFrame on the iPad Problem
[A] CSS2 in Mobile #overflow - quirksmode.org
[B] Overflow scrolling - barrow.io
[C] Overthrow - A overflow:auto polyfill for use in responsive design

posted on 2013-06-17 13:25  zoho  阅读(1730)  评论(0编辑  收藏  举报