ede*_*ett 7 css webkit touch css3 media-queries
:-moz-system-metric(启用触摸)看起来像一个非常有用的CSS选择器,用于在移动网站上工作.
不幸的是,Webkit在移动触摸设备上占据主导地位,所以有人知道是否有Webkit等价物吗?
(理想情况下,如果这是由CSS3媒体查询管理的话会很好)
小智 5
目前,如果不诉诸Javascript,就无法实现这一目标.
正如@easwee所说,Modernizr是一个备受推崇的JS库,专注于特征检测.您可以将其touch
测试用于您的用例.
如果您不需要所有Modernizr的花里胡哨,您可以执行以下操作:
A)尽可能早地在<body>
标签中加载以下JS :
<script type="text/javascript">
if( !!window.TouchEvent ) body.className += " touch-enabled ";
</script>
Run Code Online (Sandbox Code Playgroud)
B)写你的CSS.由于Gecko使用媒体查询来通知您触摸可用性,因此您必须使用特定于触摸的CSS,如下所示:
BODY.touch-enabled DIV.foo
{
/* touch-specific CSS */
}
@media screen and (-moz-touch-enabled)
{
DIV.foo
{
/* touch-specific CSS */
}
}
Run Code Online (Sandbox Code Playgroud)
如果每个选择器代码在两种情况下都相同,那么GZIP应该优化一些重复.(我希望你使用压缩.)
Chrome 是另一个尝试实现类似选择器的浏览器,但不幸的是它暂时被删除了。
Modernizr可能是一个有趣的检测工具,因为它也可以检测触摸事件。
http://www.modernizr.com/docs/#touch
归档时间: |
|
查看次数: |
2800 次 |
最近记录: |