为什么百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面?

在手机上打开淘宝和百度的网站,发现地址前面都有个“m”,这是手机端的页面。 为什么这些大公司不把PC端页面做成响应式? 这样不是可以节省点工作吗? […
关注者
580
被浏览
47,839

34 个回答

响应式设计不是万能的,它有一定的好处,但也有一定的弊端。先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端。

因为响应式最大的优点就是开发快。打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t。

那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢?

1. 响应式设计带来大量冗余代码。在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码。移动端开发必须考虑在弱网情况下的渲染方式,而响应式设计带来的冗余代码无疑是一种累赘。

2. 桌面端和移动端的屏幕大小和操作方式的差异决定了两者的设计一定存在着根本性的区别。《响应式 Web 设计》一书中提到,响应式设计应该以移动优先,在设计之初就应该以移动端网站为设计目标,然后再考虑如何在桌面端布局。你很难想象将一个功能和交互复杂的桌面端网站改写成支持移动端访问的响应式设计究竟有多么复杂。而且将桌面端网站的大量内容堆砌在手机页面上也是极其影响性能的事,可以想象页面的打开速度简直糟透了。

说了这么久响应式设计的坏处,那响应式设计有什么合适的应用场景吗?

当然有。

我们可以看到,很多开源项目的文档,初创公司的主页,以及个人技术博客都是采取响应式的。这些页面的特点一般都是交互性很低,仅仅用于信息展示,需要写的兼容性代码很少,非常适合做成响应式。

响应式看起来很美,但实际上的很多问题并不那么好解决。响应式的时代过去了。

1. 维护成本考虑。通过响应式制作各个端都完美适应的页面并不是套用一下 bootstrap 就能做好的,到最后可能一个响应式的页面维护成本要比维护 3 个不同的版本要高很多,而且太多坑了。也有很多场景 mobile 不需要桌面的所有功能,全站做响应式划不来。页面越复杂,响应式页面开发和维护成本越高。

2. 网络资源考虑。桌面 web 布局要比 mobile 复杂很多,大量的代码跟移动的快速简单相违背。响应式意味着 mobile 需要加载所有桌面的内容。页面越复杂,响应式页面的性能越差。

3. 用户体验考虑。桌面和 mobile 页面操作方式(事件)和交互方式区别很大,没有必要硬掰在一起。页面越复杂,响应式页面的交互越差。

没有见到过通过响应式页面做出在一个性能、体验优于各做一个,并且开发成本更低的例子。并且在页面越来越复杂的过程中,问题越来越大。就像你搭建了一个服务没法横向扩展一样,做个蛋蛋。

那什么时候用响应式?当你觉得桌面页面[可有可无,只是有时方便一下用户访问而已]的时候,移动优先可以考虑。其他情况价值不大。

======================== 屌爆了的分割线 ========================

因为有朋友说到知乎,那我就上个图吧...

我不觉得这种 dropdown 是知乎想要的页面效果,而且还在这么关键的位置出了 bug。这只是一种妥协的结果,为了减少投入,在 mobile site 上能用就好,同时将用户向 app 引流。从页面复杂度来看,知乎的页面上除了富文本都算是简单的。