移动Web应用开发入门指南——视觉篇
视觉篇
智能移动设备由于发展历史短，但更新速度快，从而导致移动设备的物理属性差异巨大，其中一部分物理属性影响视觉，另一部分影响到交互、兼容或性能。对人类来说，至少有80%以上的外界信息通过视觉获得，视觉是人和动物最重要的感觉，所以，咱们从视觉开始说起。
看一个案例：
访问m.3600.com首页，首页焦点图，在iPhone 4下显示如下，焦点图两侧没有空白：
图1
但在Samsung Galaxy S4下，焦点图两侧就有明显的留白：
图2
在这个应用场景中，页面的展示效果由于设备的物理分辨率不同而产生差异。类似这样的场景非常多，比如将手机横屏后视觉效果与竖屏状态的差异等，大多数人都遇见过。
那么，移动设备的分辨率到底有多复杂呢？请看下面。
分辨率
从外观来看，移动设备相对PC来说非常小巧，这是能带给用户的第一视觉感受，而设备个头大小对应的其中一个物理属性就是设备物理分辨率。移动设备经过多年发展，已具有了绝对不输于PC的物理分辨率，下面来看一张图：
图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，竖屏状态
图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开发中，视觉也不是独立存在，它起着一个承上启下的作用，影响到交互、兼容和性能的每一个部分。
移动Web应用开发入门指南——视觉篇的更多相关文章
- 移动Web应用开发入门指南——交互篇
交互篇 从PC到移动端,视觉和交互是用户能直接感受到的差异.在视觉篇中已经提到,移动设备的物理属性一部分影响到视觉,另外一些部分将影响到交互.那么,移动设备影响交互的物理属性都有哪些变化呢?对于这个问 ...
- 移动Web应用开发入门指南——兼容篇
兼容篇 兼容篇是我最想写的一部分,在这之前也总结过很多关于移动开发的兼容问题与解决方案.对于移动Web开发来说,兼容是开发重心,通常要花费30%甚至更多的时间去处理一些兼容问题,甚至时间花掉了,问题依 ...
- 微信公众平台开发：Web App开发入门
WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...
- Office 365 机器人（Bot）开发入门指南 (新篇)
最近在整理书稿时,发现我在2017年7月份写的这篇 Office 365 机器人(Bot)开发入门 的内容,因为相关平台的升级,已经完全不能体现当前的开发过程,所以我再专门写一篇新的开发入门指南给有兴 ...
- mxGraph进阶(一)mxGraph教程-开发入门指南
mxGraph教程-开发入门指南 概述 mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图.图表.网络图和普通图形的Web应用程序.mxgraph下载包中包括用 ...
- 《Office 365开发入门指南教程》正式上线，限时优惠和邀请分享推广
我很高兴地通知大家,<Office 365 开发入门指南教程>已经正式在网易云课堂上线,你可以通过直接访问 https://aka.ms/office365devlesson 这个短地址 ...
- 所有人都可以是开发人员——《Office 365开发入门指南》视频教程即将上市
今天是春节假期的最后一天,在这里给全国的朋友们拜个晚年,祝大家身体健康,晚年幸福啊.这个春节大家过的怎么样啊,我自己是在老家过的年,家乡的年味还是比较浓的,也再次感谢朋友圈的大家给我看了各地的风光 ...
- 《Office 365开发入门指南》上市说明和读者服务
写在最开始的话 拙作<Office 365开发入门指南>上周开始已经正式在各大书店.在线商城上市,欢迎对Office 365的开发.生态感兴趣的开发者.项目经理.产品经理参考本书,全面了解 ...
- 【转】mxGraph教程-开发入门指南
原文:https://blog.csdn.net/sunhuaqiang1/article/details/51289580 mxGraph教程-开发入门指南 概述 mxGraph是一个JS绘图组件适 ...
随机推荐
- 深入Java单例模式【转载】
在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下. 所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在 ...
- Thread源码分析
本文为转载,请珍惜别人的劳动成果,注明转载地址:http://www.cnblogs.com/gw811/archive/2012/10/15/2724602.html 1.Runnable接口源码: ...
- 禁随意改root密码
lsattr 主要参数如表. -a 显示所有文件和目录,包括以"."为名称开头字符的额外内建,现行目录"."与上层目录"..". -d 显示 ...
- Java Hour 15 以写小说的心态
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 突然想到我最近一直在追的小说,作者每天都会更新两章,而且质量挺高.所以从这篇开 ...
- poj 2236 并查集
并查集水题 #include<cstdio> #include<iostream> #include<algorithm> #include<cstring& ...
- myeclipse打war包
转自:http://wjlvivid.iteye.com/blog/1401707 右键选中项目,选择export然后选择J2EE->WAR File,点击next 接下来指定war包的存放路径 ...
- HDU 5682/BestCoder Round #83 1003 zxa and leaf 二分+树
zxa and leaf Problem Description zxa have an unrooted tree with n nodes, including (n−1) undirected ...
- CC2540开发板学习笔记（二）——按键
一.实验内容 用按键S1控制LED1的亮和灭 二.实验过程 1.电路原理: 可以看出,当S按下P0.0和P0.1接地,反之则接高电压. 2.寄存器使用: 依旧应该首先进行3个基本寄存器的设定,对LED ...
- 设置session失效的几种方法
转自:http://www.cnblogs.com/linjiqin/archive/2011/06/15/2081673.html 在系统登录后,都会设置一个当前session失效的时间,以确保在用 ...
- Tr A（矩阵快速幂）
Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...