行业动态
使用响应式,你考虑过那些使用低版本IE浏览器的用户吗?
发稿时间:2017-04-05

响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮。在如今移动设备大爆棚的时代,各大网站及平台都希望能够采用响应式这种秉一应万的模式,可以更灵活地去适配更多设备,

响应式被捧得这么高,那是不是所有的情况都理所当然的应该采用响应式设计呢?

响应式布局主要运用的是CSS3中的media query特性,Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观。如下图:

我们可以看到,屏幕1右侧的中间部分内容在屏幕2中移到了左下方,在屏幕3中,最右侧的内容上移到页面上端,在屏幕4中,蓝色圆圈图片移到最右,其他内容也相应发生了位置变化。我们会发现,为了实现不同屏幕下内容的一致性,往往会牺牲掉页面的美观度,这和为不同移动设备量身定制的页面效果相比,还是存在一定差距的。
响应式布局是一种全新的概念,低版本浏览器不能原生支持 

响应式这一概念最早提出是在2010年5月份,而IE浏览器却已经有20年历史了。采用响应式设计的网站使用CSS3 Media queries,即一种对@media 规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。而IE8及更低版本的IE浏览器并不兼容css3,响应式网页在IE8及其以下浏览器下渲染出的效果会非常恐怖。另外,在响应式设计中,运用了很多html5新特性,而这些新特性只有高版本的现代浏览器才支持,而在IE6,7,8来说几乎是看不了的,甚至在IE9,10的表现也只是差强人意。

不容忽视:低版本IE浏览器用户仍占相当比例

IE浏览器诞生于上世纪90年代中期。有数据称,其巅峰时期的全球市场占有率接近90%,拥有10亿以上用户。虽然自微软新版Edge浏览器伴随着Win10进入大众视野后,IE浏览器的终结就已成定局,微软也正式宣布停止支持除IE11外的其他各版本IE浏览器。

但是你不能因此而低估了低版本IE浏览器在用户中的使用率,就如同windows操作系统已经发展到windows10,但仍有windows XP或者Vista系统的死忠粉儿,他们使用的仍是这些系统所默认的IE6、7、8浏览器。不信,来看一些数据统计:

根据国外的一项最新的Net Application的浏览器市场份额统计中,IE浏览器依旧把持着全球市场的绝大部分市场份额,控制着55.06%的浏览器市场最受欢迎的浏览器则是属于微软的IE8,一共占有19.6%的市场份额。

再看看国内,根据百度官方最新统计,虽然chrome浏览器以41.51%的市场份额领跑,但IE8以18.31%的市场份额紧随其后,IE6、7、8、9浏览器市场份额相加也高达30.69%。

低版本IE浏览器用户比例这么高,这对已经采用或正准备采用响应式设计的网站来说简直就是噩耗。因为这意味着:相当大一部分使用低版本IE浏览器的用户无法享受到响应式带来的移动化体验。相反,这会增加网站的访问障碍,大大提升网站的用户流失率。这大概是那些急着进行响应式的站长们万万没有预料到的吧。

响应式设计在IE浏览器中表现差强人意,对于低版本IE浏览器更是存致命缺陷

如果你还是对响应式心心念念,或者您觉得这有些耸人听闻,认为上面所说的都有些言过其实,不妨来看看在真实的使用环境中,响应式的表现到底如何?

美国加州伯克利分校网站采用的就是响应式设计,让我们来看看网站在IE8浏览器下和在搜狗浏览器下有什么差别:

IE8浏览器下打开的网页截图

搜狗浏览器下打开的网页截图

我们可以清楚地看到,在IE8浏览器下,页面的布局有些变形,图文配比都不太和谐,甚至你会发现,原本应该显示出来的图片效果在IE8浏览器下却不存在。比如最明显的,网站的banner大图在搜狗浏览器下显示正常,在IE8下,却出现了变形层叠的现象。另外,页面中Twitter的logo图在IE8浏览器下渲染不完整,只显示蓝色的方框。试想一下,如果你正用IE8浏览器访问这样一个网页,你是不是有种马上想关掉的冲动。所以,响应式对浏览器不够包容的问题,将会给网站用户糟糕的访问浏览体验,进一步会对网站本身带来致命打击。

讲真,不要急着去使用响应式,如果你的网站用户还有很大一部分使用老版本IE浏览器的话,这对你的网站来说将是一个致命的问题,你的网站或许会因为糟糕的使用体验而流失掉很多用户。

分享到:
相关文章:
读取内容中,请等待...

博达软件

2001-2015 西安博达软件股份有限公司版权所有

陕ICP备05006923号

本站采用博达网站群管理平台移动版建设

电脑版   |   手机版   |   Pad版

在线咨询
(周一至周五:08:30-17:30)
扫一扫手机访问