【用户体验】JS根据浏览器版本提示用户是否升级浏览器及其CSS样式

根据页面的特殊效果,可能会用到html5或者其它高级浏览器才有的特效,为了兼顾使用低版本浏览器的用户,需要给出提示

在前几年,那时候经常会看到有些网站被访问的时候,站长们会在首页顶端显示一个明显的提示:你使用的浏览器版本过低,推荐使用新浏览器!

友情提示用户升级浏览器,多好的用户体验啊!(当然,这几年浏览器更新换代,IE6基本上消失殆尽!)

假设还有一些用户对IE6等低级浏览器“情有独钟”,那么我们如何处理呢?

站长只需要用JS判断当前客户端浏览器版本,然后在页面适时地加入显眼的提示。

1、JS如何判断浏览器的版本?请看这里:Javascript如何判断当前浏览器是什么类型?

2、浏览器升级的提示HTML+CSS:

  1. <DIV style="TEXT-ALIGN: center; LINE-HEIGHT: 48px; BACKGROUND-COLOR: #fcf8e1; HEIGHT: 48px; COLOR: #ff9900; FONT-SIZE: 16px; OVERFLOW: hidden"> 
  2.     你使用的浏览器版本过低,推荐使用新浏览器: 
  3.     <A style="COLOR: #ff9900; FONT-WEIGHT: bold" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target=_blank>IE9+</A>, 
  4.     <A style="COLOR: #ff9900; FONT-WEIGHT: bold" href="http://www.google.com/intl/zh-CN/chrome/" target=_blank>谷歌浏览器</A>, 
  5.     <A style="COLOR: #ff9900; FONT-WEIGHT: bold" href="http://www.firefox.com.cn/" target=_blank>火狐</A>。 
  6. </DIV> 

大家可以把这段代码植入到JS里去,然后prepend到body里。

说明:prepend() 是一个jquery的方法,作用是在被选元素的开头(仍位于内部)插入指定内容!不清楚的朋友可以去查看下jquery手册。

 

 

相关经验

导读书签
书签初始化中…