移动Web应用开发入门指南——视觉篇

 

视觉篇

智能移动设备由于发展历史短，但更新速度快，从而导致移动设备的物理属性差异巨大，其中一部分物理属性影响视觉，另一部分影响到交互、兼容或性能。对人类来说，至少有80%以上的外界信息通过视觉获得，视觉是人和动物最重要的感觉，所以，咱们从视觉开始说起。

看一个案例：

访问m.3600.com首页，首页焦点图，在iPhone 4下显示如下，焦点图两侧没有空白：
图1
1

但在Samsung Galaxy S4下，焦点图两侧就有明显的留白：
图2
2

在这个应用场景中，页面的展示效果由于设备的物理分辨率不同而产生差异。类似这样的场景非常多，比如将手机横屏后视觉效果与竖屏状态的差异等，大多数人都遇见过。

那么，移动设备的分辨率到底有多复杂呢？请看下面。

分辨率

从外观来看，移动设备相对PC来说非常小巧，这是能带给用户的第一视觉感受，而设备个头大小对应的其中一个物理属性就是设备物理分辨率。移动设备经过多年发展，已具有了绝对不输于PC的物理分辨率，下面来看一张图：

图3（来自网络）
3

通过图3可以看出两点：
1. 移动设备有很多种物理分辨率，早期的移动设备分辨率较低，而现在的移动设备分辨率已经十分高了。即将发布的iPhone 6分辨率将达到1704960，而现在市面上最高分辨率的Android设备已达到25601440，俗称2k屏；
2. 高宽比也各有不同，早期的移动设备存在各种奇葩的尺寸比例，但现在的大趋势是16:9，未来仍有采用一些奇葩尺寸比例的设备持续存在，比如魅族的15:9。此外，Pad尺寸以4:3、16:9和16:10为主；

维基百科中[List of displays by pixel density](http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density)详细的记录了各类设备的尺寸和分辨率。

更正：维基百科页面被删除，原因不明。使用两个替代方案查询设备的尺寸和分辨率：

看到这里，大家已经第一次见识到了移动Web应用场景的复杂程度，后面还会有更多惊喜等待着大家。

对于前面焦点图的应用场景，3g.qq.com就给出了一个很好的解决方案，它能根据屏幕宽度自适应调整焦点图宽度。但这个案例你可能会有疑惑，明明iPhone 4的分辨率为960640，S4分辨率为19201080，宽度640和1080相差440px，但为何焦点图侧边的空白只有40px？

要弄明白这点需要理解下面一节的内容设备像素比。

设备像素比

设备像素比（devicePixelRatio）是设备物理像素和设备独立像素（device-independent pixels (dips)）的比值。在此，我更喜欢将设备独立像素称之为设备显示像素，这个名字更方便理解，后面我将通用此名。

在浏览器环境中可以使用window.devicePixelRatio获得设备像素比。

上面的例子中，iPhone 4的设备像素比为2，S4的设备像素比为3，所以，计算出两个设备的设备显示像素分别为480320和640360，这样，宽度360 - 320正好等于40px。由于焦点图被设置为固定宽度320px，所以，在S4下就会表现为两侧留有40px的空白。

现在移动设备的设备像素比主要包含：1x、1.5x、2x、2.25x、3x，比如即将发布的iPhone 6设备像素比将达到3x，而现在世面上号称1080p和2k屏幕的Android手机无一例外都是3x，随着技术的发展，3x和4x将会是未来的主流。

在真实的移动Web应用场景中，设备像素比往往也影响着用户的视觉体验，比如最典型的背景图案例，如下：

.icon {
  background-image: url(example.png);
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

为了使图片能适配所有设备像素比，显示清晰、不虚并无锯齿，请思考下，你会如何做呢？如果你对这个问题感兴趣，可以看 @大漠 的这篇文章《走向视网膜（Retina）的Web时代》。

如果你还想要更多的了解设备像素比可以看 @张鑫旭 的文章《设备像素比devicePixelRatio简单介绍》。

Viewport

在这里我实在想不出如何来写这一节的内容，因为这篇文章并不是给大家分享技术，所以就简单的写两句。

如果没有接触过移动开发的同学，可能还没有听说过Viewport，但是这个属性已经成为移动Web开发的标配，Viewport的<meta>声明标签在移动Web页面就与<!DOCTYPE html>一样，需要默认声明。

下面是我引用《两个viewport的故事（第二部分）》中对Viewport的解释（后面会给出文章链接），

无论如何，需要把它分成两部分：visual viewport和layout viewport。
把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

所以，设置<meta name="viewport">时，就相当于在设定visual viewport的窗口大小、初始缩放等值。这些值的设定应该根据产品的实际情况来设置，允许用户缩放页面或不允许。

@JeremyWei 的两篇译文，这是我看过对Viewport解释得最详细和透彻的文章：

响应式

我相信很多前端工程师对响应式并不陌生，没吃过猪肉，还没见过猪跑么，对于读者来说响应式不要太熟悉。前面在设备像素比的例子中就已经用到了Media Queries的特性。

未来，响应式的主要应用场景就是在移动Web中。比如3g.qq.com的首页就是Media Queries的一个典型应用场景，使用iPhone 5访问3g.qq首页时，会有下面这两种不同的表现形式：
图4，竖屏状态
4

图5，横屏状态
5

目前响应式主要会应用到3类技术：

  • Media Queries
  • 新的尺寸单位
  • 矢量图

对于前面这两类技术，可以参考 @神飞 的两篇文章：

在这，我想重点说下矢量图。随着移动设备技术的这几年的高速发展，设备物理分辨率出现一个极大的跨幅，设备像素比也会长期处在1x、2x、3x并存的这样一种状态。

在这样一个时代背景下，图像从UI设计稿中解构出来，还原到页面中的实际显示效果如何实现兼容？这个问题将会是对开发者的一个极大的挑战。

此时，矢量图技术就显得非常有用，当前矢量图技术主要包含以下几种类型：

  • CSS3渐变、阴影、圆角等
  • Icon Font
  • Canvas
  • SVG

CSS3渐变是目前使用最为广泛、兼容性最好的，常见的应用场景就是将UI中的渐变背景解构出来，使用CSS3渐变进行渲染。@张鑫旭 的两篇文章很详细的解释了如何使用CSS3渐变：

Icon Font我最早见于Bootstrap 3，后来淘宝也跟进并发布了自己的Icon Font库http://iconfont.cn/。关于技术本身可以参见一淘的这篇文章《Icon font 实践》

Canvas与SVG由于运算性能和支持程度的一些问题，在移动Web开发中并没有得到很广泛的应用，有兴趣的读者可以参考下面的两篇文章：

对于未来，矢量图技术将是移动Web开发中最有潜力的一种技术，它将为UI解构和页面还原带来一种新的理解。

字体

字体显示不是影响视觉的一个关键性问题，但我还是想提到两句。

由于iOS与Android使用的系统默认字体不同，所以默认中文字体显示在系统之间会有差异。还有PC字体与移动设备也不同，所以，在还原UI稿时，通常也会有差异。如果有必要可以使用@font-face来解决一部分应用场景下的字体问题。

在默认字体显示的问题上，@元彦 给出了解决方案 字体设置最佳实践。

这里仅仅只是说了关于默认字体显示的问题，字体显示还有其他更多问题，有兴趣的可以参考mobileTech项目。

小结

在实际的项目开发中，前端工程师更多时间都是在做交互、兼容相关的工作。从技术上来说，视觉相关的技术也相对简单，所以，视觉往往会被忽略掉。在移动Web开发中，视觉也不是独立存在，它起着一个承上启下的作用，影响到交互、兼容和性能的每一个部分。

posted @ 2015-12-29 18:44  创业男生  阅读(430)  评论(0)  编辑  收藏  举报