多端适应

落日映苍穹つ 2022-05-30 01:15 225阅读 0赞

多端适配其实已经是个老生常谈的话题了，随着移动端的兴起到趋于稳定，WEB也已经发展到相对成熟的阶段。在经历了一番番的更新演进后，业界有了非常丰富的多端适配的方案。PC与移动也从分离 → 融合 → 分离走了完整的一个过程。今天小剧就来聊聊我个人对多端适配的一些想法。为什么要做多端适配？为什么需要做多端适配呢？因为前面提到移动端的兴起，带来的是用户访问我们网站的途径越来越多样化的。传统PC的站点已经很难在移动设备上使用，所以我们需要通过多端适配的方案来让WEB产品在各个设备下具有良好体验。关于多端适配的定义有很多，小剧认为的多端适配应该是一套完整的，能同时兼容PC、移动端这两大类主流设备的WEB方案。有哪些方案可以实现多端适配？实际操作起来多端适配的实现方式非常多，小剧总结下来最基本的套路主要有以下三种：响应式设计、多站点跳转、多视图切分。

下面小剧分别来介绍下这三种方案以及各自的优劣势。

1、响应式设计示例：36kr 互联网创业响应式设计是早些时候炒的比较火的一个技术方案，甚至有种被神话的感觉。那什么是响应式设计呢？响应式设计是利用 media query 和 CSS3 的一些其他特性实现的多端适配方案，本质是同一套代码同时响应多个设备。响应式设计有什么好处呢？首先响应式设计在视觉上具有高度的统一性，在合理的前期设计配合下可以大幅度减轻多端适配的工作量。可以做到一次开发适配多种设备平台。然而响应式设计同时也是一种交互、视觉、前端高度配合的开发方式，需要更为紧密的上下游沟通交流。同时在设计时需要在多种设备的交互模式上做平衡，无法将各类设备特有的交互模式做个性化的发挥。若是前期预见产品在多端下的功能模块、交互模式有差异的可能，最好不要考虑使用响应式设计的方案。另外如果设想通过一套代码完全适配从PC到移动端各类设备及各类浏览器，难度也是不言而喻的。以上均是响应式设计存在的弊端。

2、多站点跳转示例：淘宝 剁手集合地在实际应用中多站点跳转应该是使用最为广泛的一种多端适配方案。这类实现方式相对简单易于操作。多站点跳转是：针对PC、移动端各开发一套网站，通过对UA的判断由nginx或各个站点自身做相互跳转。比较常见的表现就是PC URL为xxx.com，移动端URL为m.xxx.com或xxx.com/m。这样分析下来多站点跳转的优势就很明显了。其一是因为站点是相互独立的，所以项目可以拆分给不同的团队使用不同的后端环境各自独立开发；其二是多端代码分离，可以有效利用各个设备下的交互模式并发挥到极致。相对于后面要说的多视图切分的方案还有第三个优势，这一点后面再做描述。多站点跳转的弊端总的来说还是比较少的。勉强算一个的话，在跨设备访问的时候，细心的用户可以感知到URL的变化。另外就是需要特别处理好多端下的URL映射规则，需要保证线上多个站点下的URL同时存在，不至于由于页面缺失导致不必要404的存在。

3、多视图切分示例：Github 全球最大同性交友平台多视图切分从URL上来看有点儿像响应式设计，但是从实现方式上来看又和多站点跳转非常类似。多视图切分一般是由同一个后端环境处理，在MVC结构上通过对各个设备开发独立的views，由controller根据UA做出views的选择。所以在多端适配的过程中用户不会感知到任何URL的变化。多视图切分的优势和多站点跳转有点类似，只是工作拆分粒度没那么粗，仅仅是在views层面做切分。其次由于views的相互独立，同样可以针对各个设备开发相对独立的交互模式。从上面的总结来看，多视图切分看起来在一定程度上同时具备了响应式设计和多站点跳转的优势，也同时缺少了各自的弊端，理论上应该是市面上应用最多的一种适配方案。然而观察市面上一些流行的大型站点，几乎很少能看见这种方案踪影，这是为什么呢？可能有同学已经能猜到了，原因就是在CDN上。为了缓解服务器压力，运维同学通常需要对网站做缓存优化。目前市面上通用的缓存方案的最小粒度是URL，而多视图切分却是同一个URL对应多种响应，处理不好很容易导致缓存的混乱。这也就是在多站点跳转时提到的第三个优势，可以非常容易的进行CDN优化。

这三种方案改如何选择？这三种方案总的来说各有利弊，所以如何在特定场景下做准确的选择是非常重要的。小剧从网站功能和交互模式上来分类，一般会有下面几种对应关系。一类是纯展示类的官网、活动宣传网站。通常这类网站交互模式较轻，可以很方便的用同一套代码响应多类设备，因此响应式设计是最好的选择。无论是设计成本还是前端的还原成本都可以大幅度的降低。另一类是交互模式较重的网站，如电商、社交平台。通常需要在各个设备下充分使用自身的交互模式，像PC的鼠标和移动的触摸事件，甚至某些场景下需要利用特定设备的特有特性如PC的拖放事件和移动端的陀螺仪。这类网站一般只能在多站点跳转和多视图切分两者间做出选择。至于在后两者中推荐使用哪个方案，其实在一般中小型站点下并没有明显的区别。一来是开发模式比较像，仅仅是拆分粒度不同而已；二来是部分网站的缓存并不针对页面，主要的目的还是减轻静态资源的访问压力。如果一定要问小剧更推荐哪个方案，我认为应该是多站点跳转。原因很纯粹，就是简单、干净。虽然小剧关于三种方案的描述比较独立，但是实际使用中它们并不是绝对互斥的存在。在同一个网站下面对不同的需求做出针对性的选择，可能会收到更为显著的效果。仔细分析的话，市面上绝大多数的网站一般都是糅合了小剧提到的这三种方案。PS:如果你看到了这一行，很感谢你没有因为小剧干涩的描述方式而走开。本文只是根据小剧的开发经验谈谈多端适配思路上的一些想法，并不一定完整、严谨。PPS：举个小栗子，小剧客栈的从大的逻辑来看使用了多视图切分的方式，用来区分IE678等低端浏览器和高级浏览器。具体到高级浏览器下的视图又使用了响应式的来做PC、移动端的适配。操作上和本文提到的方案略有出入，但是总体思路是互通的。

tgs：多端适配,响应式,响应式转载请注明来源：http://bh-lay.com/blog/15c9c6ec27d