2020移动跨屏设计

最近2年，以华为手机为例各种手机品牌的双屏和柔性屏的发布，以及人工智能AI及深度学习所带来的影响，直接给网站建设公司带来交互、设计和体验上的机遇和挑战。设计师必须要学会跨屏设计规范。

 

 

柔性屏和双屏设备

2019年是否算得上是双屏设备元年，现在下结论为时过早，但是去年三星 Galaxy Fold 和 Moto Razr 的发布，确实给广大硬件厂商好好打了一个样。

 

尽管Galaxy Fold 去年折戟沉沙了，但是高昂的沉没成本和大势所趋让三星肯定不能就这么算了， 回炉再造一番之后今年又带着船薪版本的 Galaxy Fold 2 杀将回来，顺带还兼顾女性市场整了一个对标 Moto Razr 的化妆盒手机 Galaxy Z flip。

 

图片来自 TheVerge

 

当然，华为的 Mate Xs 也是相当优秀的产品，这款明显对标三星 Galaxy Fold 2 的产品，并没有将柔性屏制作成为向内折叠，而是完全翻过来，将它作为外屏来进行设计，反向折叠，展开的时候，屏幕自然延展。

 

图片来自 TheVerge

 

不过思路最为清奇的并非是华为，而是 TCL。就在这几天，TCL 带来了两款全新的原型机，一款手机带有两个折叠轴，相当于是将传统手机屏幕延展到以往的3倍，彻底折叠开相当于是一个 10英寸的平板电脑（回过头来想，就像是将一个平板电脑反向折叠到手机的大小，但是重量不变……）。

 

图片来自 TheVerge

 

另外一款原型机则选择了抽拉式的设计，机身可以如同抽屉一样拉开，柔软的屏幕会被拉出，延展开来差不多和 iPad Mini 一个大小了。

 

图片来自 TheVerge

 

图片来自Engadget

 

除了这几款之外，在今年年初的 CES 消费电子展上，联想、戴尔、华硕，这些目前世界上最大的消费电子制造商，纷纷带来了各自的折叠屏和双屏设备。

联想带来的 ThinkPad X1 Fold，是一个价格昂贵的柔性折叠屏平板电脑，它额外附带了一个蓝牙键盘。

 

图片来自 TheVerge

 

考虑到联想在此之前已经发布过带有LEC+墨水屏的双屏设备 Yoga Book 2，可以说联想是已经具备了制造两种不同类型屏幕设备的能力。

 

作为对手的戴尔，带来了分别对标联想这两个系列的对应产品：Concept Ori 和 Concept Duet。

 

Concept Ori 采用的是两块传统硬屏，你既可以让一款屏幕作为屏幕，另一块作为虚拟输入键盘或者手绘板，也可以使用配备的蓝牙键盘，吸附在底下的屏幕上来进行输入，而且当键盘移动到靠近转轴的地方，还能让底下露出的半块屏幕作为触控板来使用：

 

图片来自 TheVerge

 

Concept Duet 在概念上则和 联想的 ThinkPad X1 Fold 类似，一块柔性可折叠的屏幕，便于收纳，一体连接。

 

图片来自 TheVerge

 

看了这么多硬件，是不是觉得信息量有点大？不过简单来说，所有的这些产品，都在说一件事情：屏幕要延展开，这是一个正在发生的趋势。

同时，我们还注意到一个很明显的特征，就是所有的这些柔性屏设备都非常的……骚，且贵。动辄两三千美元的起步价，如果可靠坚挺也就算了，不仅转轴易损，且屏幕也存在易损的问题。根据 ifanr 最新的上手评测，即使是在优化了转轴和屏幕折叠角度之后，三星所发布的 Galaxy Z Flip 的屏幕中段依然有着不可忽视的折痕，这一问题可能会是绝大多数折叠柔性屏设备的通病。

 

图片来自爱范儿

 

与之相反，采用硬质双屏设计的硬件设备，从生产成本、工艺成熟度、价格上，都更加有优势。

 

值得注意的是，柔性折叠屏和硬质双屏设备，在基本的使用体验和逻辑上是一致的，除了极少数特殊的设备之外（比如 TCL的双折叠式的概念机），多数情况下，两者是差不多的。

 

只不过存在一个问题，双屏设备的交互和体验，需要有对应操作系统支持，因为从单屏到双屏，其实交互逻辑已经发生了巨大的改变。

双屏硬件的操作系统

一直在创新且「稳健」地更新软硬件的苹果公司，应该不会在市场未曾成熟的情况下选择发布硬件，这意味着你不会很快看到双屏 iOS 硬件，而面向着大量 OEM 厂商的 Android 和 Windows 则截然不同。着两年厂商已经身体力行证明了一件事情：只要操作系统和设计跟上，硬件马上量产不是问题。

 

最近泄漏的 Android 11 的新特性已经出现了可折叠屏幕的影子，但是具体情况恐怕要到因为疫情跳票的 Google I/O 大会上会揭晓答案。但是另一边，贼心不死的微软，已经开始布局面向可双屏设备的新一代操作系统 Windows 10X了。

 

图片来自 TheVerge

 

去年微软发布的两款双屏设备 Surface Duo 和 Surface Neo 并不都是采用尚未发布的 Windows 10X 操作系统，但是两者都沿用了几乎相同的交互逻辑，较小的 Neo 采用的是 Android 操作系统。这两款硬件和系统交互设计，将会在未来一段时间以内，成为双屏硬件的软件交互的重要参考和主要标杆，联想和戴尔这波 OEM 厂商，无疑是参考着微软的风向标来搞硬件产品的。

 

图片来自 TheVerge

 

传统而臃肿的「开始」菜单栏在 Windows 10X 当中，被精简为我们更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基础上，应该有对移动端（比如 ARM 架构的CPU）和小屏幕有更好的支持。

 

 

但是，更有价值的，是微软为双屏设备所制定的交互设计规范。

下面是基于微软官方文档，精简编译后的规范：

双屏的交互规则

双屏交互概述

 

双屏设备可以基于不同的工业设计，有多种硬件样式。微软发布的 Surface Neo 和 Surface Duo 可以作为典型的双屏设备作为参考。双屏本身可以借由铰链、转轴来连接，也可以基于柔性屏来实现。

 

所有的双屏设备都具备有折叠、旋转、翻转的功能，两块屏幕都可以用来作为显示，也可以一个做屏幕一个承载虚拟键盘，当然也可以借由外设，构建、组合成为新的模式。所以，为这样的硬件设计的时候，需要考虑到各种不同的情况，并且适配硬件，帮助用户实现更多的目标。

当用户打开应用的时候，它的主要界面窗口应该最大化，占据一块屏幕的全宽和全高。这样用户可以一次打开多个不同的应用，显示在双屏上。

 

图片来自 TheVerge

 

当然，你的APP 也可以完整铺满两个屏幕，这个界面布局被称为「跨屏布局」。在默认情况下，它应该像在大屏幕上一样，一个窗口跨屏幕显示。但是你可以修改这种模式，让它可以铺满两个屏幕的同时，还可以兼顾到中间有转轴和铰链的硬件。对于这个问题，我们随后有详细的讨论。

 

1、拥抱和改进现有的功能

响应式布局

 

比起传统的响应式布局，对于双屏硬件，我们要讨论的「响应」模式要复杂得多。就像下面这张图中所说的，要为这样多样、复杂的情况进行设计：

 

 

我们默认用户在多数时候，是处于双屏展开的状态，当用户打开 APP 的时候，它的主要界面窗口，将会最大化占据一个屏幕，这个时候另一个屏幕处于空置状态，用户可以在这个屏幕上打开另外的应用，并且用户可以通过托拽窗口的方式，来重新整理窗口和APP的排布模式。

 

 

同时，单个应用程序也应该可以进行跨屏布局，既可以让单个应用分别在两块屏幕上各呈现一个窗口，也可以作为单个窗口完整铺满两块屏幕。不论是充分利用接缝的存在，还是说尽可能地利用全部屏幕区域来聚焦单个内容，应用程序应该都可以做到。当然，这些情况我们随后会单独说到。

 

2、拥抱和改进现有的功能

首先，作为一个已有的应用程序，在双屏设备上应该能够继承原有的功能，并且尽可能地兼容双屏的体验。在开始讨论如何为双屏场景进行设计应用之前，我们先应该对双屏交互进行介绍。

 

双屏的响应式布局

 

首先，无论屏幕尺寸如何，方向如何，应用程序应该都可以保持良好的外观，善用 UI 平台的现有的布局技术，通过合理地缩放来自适应，填满屏幕。如果你的屏幕元素依赖屏幕长宽比，那么应该善用平台给的 API 来进行灵活的优化。

 

考虑到你的应用将会在很多不同尺寸、不同长宽比、不同类型的设备上运行，所以你的应用程序应该足以应对各种不同的情况。请记住，你的设计将会遭遇和以往截然不同的屏幕尺寸和长宽比，比如纵向（全景视图）、横向（较宽的全景视图）、纵向双屏分别显示等不同情况。

 

考虑所有的屏幕方向

 

用户在很多平台上有习惯的、常见的屏幕方向，比如在 Android 和 iOS 上，通常应用是竖屏显示的，在 Windows 上，多数情况下是横向全屏显示的。而在双屏设备上，这种情况会发生改变。

 

比如你的应用原本是为竖屏设计的，但是需要经常输入内容，那么你要考虑到双屏设备上，你的应用可能是会被横屏显示，用户会像用笔记本电脑那样来使用应用，也就是说两块屏幕都横向显示，靠下平摊在桌面的屏幕会显示虚拟键盘或者手写区域，作为输入窗口，而显示窗口也是横向的。

 

双屏为多任务提供更好的显示环境，你不会知道用户会在什么样的场合，以什么样的姿势来握持设备，但是考虑潜在的使用姿态，可以让你更好得对应用进行设计和优化。

 

根据我们的研究，如果你的应用是注重输入的应用，那么用户在平面上打字和输入将会是最舒服也最常见的姿势。那么在这种情况下，你应该针对横屏显示进行针对性的优化。

 

支持多种输入模式

 

对于新的双屏设备，通常都支持多种输入模式，包括打字输入，屏幕触摸和手写笔这样的截至。这意味着用户可以灵活地根据需求，选择不同的姿势和输入模式，并且快速切换，以适应不同的需求。

 

换句话来说，就是你在设计的时候，需要支持所有的输入方式，以便用户可以自由选择交互模式。

 

托拽交互

 

你的应用应该支持屏幕托拽，这不仅是为了兼容双屏设备，而是对于绝大多数的设备的使用情况而进行兼容，确保用户体验的一致和灵活。只不过相比于在屏幕单屏上进行托拽移动，在双屏上托拽移动，将会带来更多的可能性，并且这样也将会在双屏使用场景之下，最为重要的交互模式之一。

 

为了确保托拽操作的自然，你需要确保诸如文本、图像、视频等常见的交互对象和元素，可以在任何地方进行剪切、复制、粘贴，并且对于共享和放松之类的操作也启用托拽操作，这将最大化地利用双屏的优势。

 

应用的多屏呈现

 

用户会希望在两块屏幕上并排显示同一应用中的不同内容，因此你的你用应该支持多实例呈现和运行。

 

多媒体内容画中画体验

 

如果你的应用是一个多媒体应用，那么应该支持画中画模式，用户可以边看视频边执行别的操作。

 

3、双屏用户体验常见注意事项

上面提及的很多功能属于基础应用要求，并不是专门针对双屏设备而做，但是如果你的应用支持上面的功能，那么在双屏上将会明显拥有更好的用户体验。接下来，我们着重聊一下在双屏设备上进行设计的问题。

 

在双屏设备上，你的应用应当支持在单个屏幕上运行，也可以在双屏上运行，当一个应用在两个屏幕上显示的时候，我们称之为「跨屏」，而跨屏显示这个问题对于双屏设备而言，是至关重要的，如何显示将会带来巨大的影响。这种独特交互模式可能会解锁前所未有的使用方法。比如，有转轴和接缝的双屏设备，因为屏幕的特征而非常适合分隔并行式的生产力解决方案。

 

在设计双屏设备之前，你需要遵循以下几个基本原则：

提供持续的价值：能够良好地支持不同的交互模式，充分利用不同交互模式和多屏交互，让用户可以灵活地执行任务。它不应该只有有限的使用方法和模式，与其简单的支持一两种模式，不如多考虑几种不同的交互模式。

不要只想着「跨屏」：应用不应该只在跨屏状态下才好用，不要将一些基本的功能在非跨屏状态下隐藏，避免用户需要跨屏才能用到基本功能。

用户始终享有掌控力：为了避免给用户带来不可预期的破坏性体验，是否要跨屏，这个应该由用户自己来进行选择，而不是一打开就跨屏。

让跨屏可预测：了解用户使用跨屏模式的场景，并且使用贴合用户预期的设计。确保不同的跨屏模式和呈现结果是用户可预期的。

跨屏是用户的选择

 

用户有选择如何使用应用的方式的权力，包括何时跨屏显示。某些应用可能在单屏或者跨屏显示的时候，看起来不够好看，但是如何使用的权力，应该交给用户去选择。

 

尽管本文会针对如何处理多屏布局提供几种不同的方案和想法，但是请选择适合你的用户和应用的呈现方式。

 

考虑用户意图和设备方向

 

当你的两个屏幕都被利用起来的时候（横向双屏，纵向双屏），了解用户的意图至关重要。尽管还有更多的调研需要做，但是结合我们目前已有的观察，可以得出如下的趋势：

 

在横向双屏模式下，用户更多希望充分利用屏幕空间，因此量屏幕多是用来扩展展示内容；

 

在纵向双屏模式下，用户通常喜欢执行多任务或者提高生产力的活动。因此这两块屏幕会被分开使用，或者分组使用。
考虑所有支持的布局

 

在为双屏设备设计应用的时候，有四种常见的布局方案是你需要考虑的。通常这取决于应用是单屏还是跨屏，是默认视图还是全屏视图：

 

1、单屏默认模式

 

默认情况下，应用程序应该是最大化状态占据一个屏幕。在双屏分别显示模式下，用户可以单独同两屏的应用界面进行交互和处理，确保可以进行使用、比较甚至交叉引用。

这个状态应该是默认的。就像 之前说的，如果你的应用已经支持了不同分辨率、不同长宽比的屏幕，那么你不用做其他更多的事情。

2、跨屏默认模式

 

当设备处于双屏状态下（横屏双屏或者竖屏双屏），用户可以将单个窗口从一个屏幕直接延伸覆盖两个屏幕，为内容呈现提供更多的空间。这应该是用户自己的选择，而不应该作为默认打开的模式固化到程序和设置当中。

这一模式应该是可选的。这种跨屏显示单个窗口的模式，应该是双屏设备所独有的。如果你对于你的应用不做针对性（针对双屏）的修改的话，它会像是在一个完整的大屏幕上显示一样。但是，你也可以针对双屏进行优化，确保你的应用可以兼容双屏设备的独特形态。这些将在后续详细说明。

3、单屏全屏模式

这种模式和之前的单屏默认模式是类似的，但是系统的UI（系统的任务栏、菜单栏、程序菜单、顶部标题等）将会隐藏，这样可以给你带来沉浸式的体验，是游戏和视频类应用的理想选择。

这种模式应该是可选的。你可以使用系统提供的 API 来实现单屏全屏模式。

4、跨屏全屏模式

同样的，你可以通过开发和优化来实现适合双屏的跨屏显示模式。如果用户在跨屏的时候选择的是跨屏全屏显示模式，那么应用在扩展之后，将会覆盖整个屏幕，并隐藏系统UI 元素。

这种模式应该是可选的，你需要考虑的因素和跨屏默认模式类似。

4、如何处理接缝

当单个应用以单个窗口运行，并且跨越两个屏幕的时候，跨屏布局就出现了。如果你原有的应用从未针对双屏设备进行优化的话，那么系统会提示你「应用将会扩展并占据所有屏幕」，并且这个时候，应用界面会自行调整大小，适应新的尺寸。

 

这种情况下，界面中间的接缝会显得非常明显。这是双屏设备先天的副产物。要如何优雅地处理接缝？这就是下面这节内容将会探讨的问题，我们将会提供一些常见的处理方案。

 

是否总是要适应接缝？

 

如果你的应用不作任何优化就直接在双屏设备上投放使用，接缝并不总会给用户体验带来影响。比如地图类应用，用户可以随意移动地图内容，接缝带来的割裂并不会对使用体验造成实质性的影响。在后面「扩展画布」这一节，将会对这个问题进行深入讨论。

 

 

但是对于另外一部分应用，接缝带来的问题就非常严重了。比如在一个表格类应用当中，如果不作修改和调整，有的内容会直接被接缝给割裂开，你必须进行滚动才能正常查看。而对于某些相对更加固定无法移动的元素而言，接缝带来的体验是破坏性的。而这个时候，我们需要使用一些技术方案来处理这个问题。

 

 

规避接缝

 

将元素移到一边

 

由于两块屏幕之间有明显的接缝，因此当用户在使用应用的时候，某些 UI 元素可能会正好被穿过接缝，逻辑上这不会影响功能，但是如果将这些 UI 元素移动到屏幕的一边来显示，会提供更好的体验。最好避免在接缝处显示文本内容，这会影响可读性。

 

应用程序对话框应该移到屏幕的一边，尤其是需要点击按钮操作的时候。

 

 

底部菜单应该移动到屏幕一侧，而不是延伸到两个屏幕上。

 

 

用户调用上下文菜单的时候，应该将接缝视作为屏幕边界处理，尤其是在靠近屏幕边缘的地方触发菜单的时候。

 

 

应用内的下拉菜单或者可扩展容器如果可能会跨越接缝的话，应该改变扩展方向。

 

 

当整个应用界面扩展开来的时候，应该整个移动到屏幕的上侧，而不是在靠近中心的位置横跨接缝。

 

 

 

贴合接缝

 

使用偶数列并和接缝对齐

 

当界面中使用网格布局的时候，垂直或者水平方向尽量使用偶数行或者偶数列，这样可以让接缝和界面间隙正好重合，用户可以更加舒适地查看信息。

 

 

在网格中使用偶数列，尤其是对于容器、表单，并且考虑到接缝来控制间距。

 

 

除此之外，还有许多应用会考虑充分利用另外一个屏幕来显示弹出菜单或者下级页面的内容。这种使用逻辑确实会让应用更加易用，并且在视觉上会更加干净清爽。但是请记住，如果弹出的界面并不是全屏的，可能会暗示它是可折叠和可关闭的，因此，你需要根据实际的设计需求，来灵活的处理呈现样式。全覆盖另外一屏的弹出界面，更加适合小尺寸屏幕。

 

 

重新排列 UI 元素

 

移动到接缝的任一侧

 

还有一种用来优化响应式布局的方法是，当屏幕方向或者大小发生变化的时候，重新排列你的内容。这种方式让你可以在两个屏幕上随意扩展你的内容，你可以通过分组来重新排列，以更有目的的方式来适配屏幕和内容。

 

 

遮罩和分割

 

对于一些无法重新排列的元素，比如全屏图片和视频，这个时候只能使用遮罩和分割的方式来处理。

 

 

遮罩的思路是，将接缝视作为一个遮罩元素，而图片被它给遮挡了一部分，根据格式塔原理，我们的大脑会自动补足缺少的部分，遮罩遮罩处理方式适合处理多媒体（视频，图片等）这样的画布类型的场景，在这些场景下，保持图像的连续性比显示内容的完整性更加重要。分割的思路是将内容均匀切割为两个部分，完整呈现，这对于包含有多个控件和元素的普通界面而言，是更加合理的处理方式，包括可能会出现在屏幕中间的按钮。根据类型的不同，这两种处理方式各有优势，我们将继续跟进不同的用户行为特征，来寻求更优的解决方案。

国外研究人士撰写的以移动优先原则制作跨屏页面的方法，共从业者参考~

 

创建跨设备的响应式设计

如今25%的网站流量来自于手机。如果你不建立个响应式网站，你将损失1/4的用户。好消息是借助Sketch、Web Inspectors和CSS3等工具，你将很容易的完成设计。你仅仅需要知道如何开始和如何使用。

 

最近，我为Carshare.hk, Ripplechat.io 和 Canvaspod.io做移动设计。在此文中，我将带你一起体会我的工作流程。

 

在Sketch中建模（原型－译者注）：

如果你的设计可以很好的适应iPhone的屏幕，那么它将可以在其他大部分的设备上看起来很棒。由于我的目标用户是全年龄段的人群，他们喜欢更大的字体和图片。适合在舒适的距离来阅读。这便是我们追求的目标。我们的目标是建立响应式的专注内容的网站。

 

在Sketch中，我建立2个相邻的画板，一个针对iPhone设计，另一个针对iPad设计（也适应更高的分辨率）

 

对于移动端，我们设计了宽度为640px，0.5比例显示（Vewport）。我们试图在实现完美的用户体验的前提下尽量避免出现视觉差异。你不必设计两个不同的网站，而是创建一个适应不同设备宽度的设计。

 

针对Hero内容，在手机端将其居中对齐；但在桌面端，将其居左对齐。同样，汽车的数量将根据浏览器的宽度动态的增减。最后，在移动端标题略大。

 

移动端的上下滚动是很有趣的，但我们不能在内容很少时仍然过度使用滚动功能。这就是为什么我将图标设计的小一些、文字更紧凑一些的原因。如果我在这里仅仅放三个大圆，那么阅读同样的内容将需要滚动三次。

 

内容需要在任何地方都看起来非常一致。不要有改变。

 

以点触为标准的设计

如果你有一些设计iOS应用的经验，你应该熟悉最小尺寸：文字（24px，最佳阅读尺寸：32px）、按钮（44px至88px）和导航栏（72px至98px）。这些尺寸与安卓设备是一致的。

 

当调整宽度小于720px时，应选择60px的按钮使标题过渡到更大尺寸更舒适。

 

尺寸、对齐、菜单中元素的数量以及按钮应与设备的宽度相适应。

 

如果你知道比例，你可以定位中基准（middle ground）以适应移动端和桌面端。例如局部标题。

 

文字尺寸和比例

某种程度上来讲，大即好。但更重要的是，在比例上与内容和谐。如果主体的文字设置为24px，那么确保网站的其他部分与它一致。虽然这些没有硬性的规定，但行间距应该为字体的1.2至1.4倍。设置尺寸、文字粗细和色彩范围都应基于优先级。上述这些要素很多都取决于直觉和专业素养。

 

标题通常是正文的1.5至2倍大小，但文字更细——否则将过度吸引用户的注意力。

 

一行应该有45至90个字母（英文字母－译者注）。请阅读《排版微指南》（英文网页－译者注）以获取更多信息。

 

支持SVG

-SVG是一种独立文件格式。它可以在设备间无缝的兼容任意像素密度的显示。

-在Sketch中，你可以将文件以SVG格式输出。非常的实用。

-SVG同样使用起来难以置信的简单——就像img一样。（详见下图）

-SVG可以用于IE9以上版本、Firefox、Safari和Chrome浏览器。但是如果你一定需要兼容一些老浏览器，请点击《如何支持图片》（英文网页－译者注）

 

使用网页套件（Webkit）来创建动效

展现形式非常重要——它直接影响用户体验。如果它运行缓慢，人们不会感激于你设计了副标题。因为他们只会纠结于运行得如此之慢。

 

当车启动时，在底部我使用网页套件过渡效果（Webkit-transform）来替代使用jQuery动效。展现形式的效果是显著的。此外，在移动端的Safari和Chrome上表现出色。

 

为了达到视差效果，我为三个不同的元素赋予不同的速度。我使用网页套件过渡效果（Webkit-transform）来代替CSS顶部位置。滚动起来更顺滑正是得益于此。

 

设置视图（Viewport）

我们需要告诉iOS和安卓设备我们是以0.5比例来设计的。因此以640px宽度显示时可以完美呈现。对于iPad，我们将比例设为1。

 

iOS 智能横幅（Smart Banner）

如果你拥有一部iPhone，你可以用一段代码将你的网站和你的应用链接起来并在你的网站顶部呈现你的应用。

 

当人们用他们的iPhone或者iPad访问你的网站，他们将看到一个漂亮的横幅，它链接到App Store。

 

使用iOS模拟器

如果你学习了一些Xcode，你可以使用一个简洁的工具来预览你的网站在iPhone和iPad上的效果。

 

在Safari中检查元素

如果你的iPhone中有开发工具、iOS模拟器和Safari，你可以直接检查HTML和CSS元素。这样对于调试功能、性能测试和即刻应用样式的检查有巨大的帮助。想了解更多信息，请点击这里（英文网页－译者注）。

 

这里我可以检查iPhone中的Safari浏览器。

 

在安卓系统的Chrome检查

有一半的移动端用户来自安卓设备。为了检查在安卓系统的Chrome浏览器中各元素的表现，你需要遵循：我花费了一点时间来找到它：菜单 > 工具 > 检查设备（Hamburger Menu > Tools > Inspect Devices）

 

小结

-

建立一个真正跨浏览器和设备的响应式网站绝非易事。这就是为什么我们需要高效的完成工作同时避免将过多的时间浪费在一些令我们抓狂的事情上。就像我们学着放弃IE6一样，我们试图摒弃一些老的设备使用更小的解决方案。