检测HTML5函数的一个技巧是检测什么情况下无法运行,而非什么情况K正常运作。经常会在出错的页面上看到提示信息“此页面仅在IE下可见,请升级浏览器”。显然,大部分使用非IE浏览器的用户认为他们的浏览器才趄“升级”的版本,也不想只是为了浏览一个站点而切换成IE。大部分人只是笑一笑,然后再也不会访问那个网站了。
在IE拥有大部分浏览器市场占有率时,期望用户切换成IE是可以理解的,但现今IE只是许多同样优秀的浏览器中的一种,并且根据市场变化趋势,过不了多久IE甚至很可能不再是最受欢迎的浏览器。
目前,最好的做法是列出想要提供的特性,并对网站进行降级处理。这样,那些较弱的浏览器虽然无法使用许多网站功能,但至少可以访问到一个有用的站点。此类操作被称为优雅降级,属于一种容错机制。
优雅降级的理念源于系统在一个或多个组件错误时,应当仍能继续运行。在Web开发中,这意味着即使在HTML5组件无法被浏览器完全支持时Web页面仍能继续运作。
<video>标签是一个不错的例此标签需要浏览器同时支持视频编解码器以及<vide〇>标签。只要无法被支持其中一个.视频就无法播放。在这种情况下可以选择以卜'方式
>忽略错误,什么都不显示或显示一条错误信息,即由浏览器决定。
>检测到错误并提示用户升级浏览器。
>检测错误并执行回退措施。
最好的选择是检测错误并执行回退措施。各个浏览器和用户都不相同,可以通过提供替代方案使问题更少。
切记这里并不是要找解决问题的最完美的方案。我们的目的是要让选用HTML5浏览器的用户觉得物有所值。使用另一种语言完全fi制网站并不是最好的方法,还会让工作量成倍增加。
4.5使用CSS3媒体查询检测移动浏览器
CSS2引入了 media-dependent (媒体类)样式表,开发者可以利用它们来为不同的媒体类型创建独立样式表。例如,你可以创建下列样式表。
>all—所有媒体类型。
>aural——语音合成器。
>braille—盲文装置。
>embossed——分页盲文打印机。
>handheld——小型设备,通常为单色^
>print——纸张格式及“打印预览”。
>projection-投影仪。
>screen-彩色电脑屏幕。
>tty^有固定字符网格的电传打字设备。
>tv——A有低分辨率、色彩及声音的电视设备。
可以使用media厲性将媒体类型添加至样式表,从而定义样式表的媒体类型。
<style media="screen_>
或者将其添加至外联样式表标签。
<link media="screen" rel="stylesheef href="style.css*>
或者用@media标签将样式添加至己有样式表中。
<style>
@media print {
// add styles here
}
</style>
CSS3扩充了媒体属性,这样用户可以在各种条件下检测用户代理。浏览器在满足条件的情况下可以输出对应的样式表。例如,以下代码可以为小屏幕用户输出不同的样式表。<link rel="stylesheet" media="screen and (max-width: I28px)"href=*small-screen.css">
可以通过以K媒体特性来检测浏览器。
>屏幕或设备的宽度与高度。
>屏幕方向。
>屏幕或设备的纵横比。
>颜色及颜色数景,单色或彩色以及颜色位深。
>分辨率。
>电视设备扫描进程。
>网格或位图设备。