CSS之第五个position:fixed的手机平台

CSS之第五个position:fixed的手机平台

作为开发者都很反感position:fixed这个属性不被移动手机平台所支持,但是可以肯定的是移动平台不会主动去修补这个问题。我们目前的情况也不会出去这个困境。

这里提供一种解决方案,假设一种新的属性 position:device-fixed 是专门用在移动平台上的,同样的zoom属性也是完全被特殊浏览器以及移动平台的浏览器完全忽略的,并且到目前为止也没有一个好的解决方法。

利用这个心的属性,fixed的这个属性可以分别在桌面浏览器以及移动平台上分别设置。

问题:

目前的问题是移动平台浏览器以及桌面浏览器是完全不同的两种方法。

一方面,fixed属性的元素在移动平台的屏幕上必须简介,而在桌面显示器的屏幕上又需要显示的比较宽阔。

另一方面,fixed属性的元素内容很可能在手机平台上要比在桌面平台上更重要。如果你在小荧幕上划分出一块区域,那最好将重要的内容放在里面。反之,因为桌面浏览器的屏幕区域比较大,那fixed属性的元素经常伴随着许多无用和很少被关注的信息。

直到现在,web开发者为桌面选择的开发方式,是的fixed元素为桌面设计的非常之大,而对于手机平台这样的信息呈现将可能溢出元素之外。然而,即使可以固定弄屏幕,但是由于DOM元素被固定,就会牢牢的停留在它原来的位置,这就导致用户看不到或者很少能够读到他们需要的信息。

如果手机浏览器使用了position:fixed并且精确的解析了,那么许多使用fixed元素的网站就会在手机平台上边的没有价值了。因此,大多数的手机浏览器或略了此属性。从一定意义上讲,他们的做法也无可非议,尽管position:fixed可以运行在手机上。

position:fixed

CSS2.1里的属性定义如下:

fixed位置是absolute位置的一个子分类。唯一的不同点就是对于一个fixed属性的dom元素包含的block元素预览时。继承类的媒介,fixed属性的不会随着文档而股东。从这个意义上讲,他们类似于background-image的fixed。

fixed boxes的属性被手机浏览器忽略。另一方面,它也忽略zoom属性。在桌面浏览器,position:fixed属性可以很好的展示,而且不会随着文档的滚动而滚动。而在手机浏览器上,有两种表现:可见的和溢出的。取决于浏览器如何解析fixed元素模型。

这些不同的表现不会让人感到惊讶。 

表现形式:

如果我们给元素设置bottom:0;属性,元素将底对齐,且不随页面而滚动。下面是一个fixed layer底对齐的示例: 

尽管这点表现在桌面浏览器上表现的很好,但是在手机平台上只有诺基亚的WebKit浏览器可以支持而且还仅是在部分版本支持,比如N8以上的版本。 

溢出的表现:

其他的浏览器,尤其是Safari浏览器在苹果操作平台上,甚至不会随着页面的滚动而滚动,它们忽略了部分属性。但是增加了bottom:0;的情况下,仍然是zoom属性有效,而且会随着屏幕的而滚动。

这一方案并不完美。fixed属性的元素可能会覆盖页面的内容。设计者确保绝对定位的元素不会覆盖任何元素,但是很可能会忘记给fixed元素设置,因为他们只是假设用户之滚动了一点。如果一个fixed属性的元素随着页面滚动时,它下面的元素绝不会被覆盖。 

后面的内容好复杂,不想翻译了,大家看原文,呵呵:http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html