浅淡HTML5移动Web开发.pdf

: .
覆盖默认的画布缩放设置。在标
签中插入 meta 标签，设置相应属性即可，如上代码，name=”viewport”content 中 width=device-width
表示浏览器页面宽度等于设备宽度（同理可以设置高度，也可指定具体值），initial-scale=1 表示
页面不缩放保持，mininum-scale=1 和 maximum-scale=1 表示允许用户最小缩小至原大小和扩大到原
大小（实际就是不让缩放^^），user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi
表示适配高分辨率的屏幕，还可以取值为 dpi_value | device-dpi| high-dpi | medium-dpi |
low-dpi，后面的四个定性，第一个定量，即 dpi_value 是 DPI 值，device-dpi 是使用设备原本的 dpi
作为目标 dp，不发生默认缩放，而后面的三个是指 dpi 取值在一定范围的表示。这里我们先介绍前
文出现过的一个名词 dpi，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示
屏能够以越高的密度显示图像。当达到人眼的极限分辨率时，乔帮主给它取了一个很高端的名字——
Retina。那么目前市面的手机分辨率是怎样的一个分布呢，ios 大家都知道的，从 iphone4 时代开始
就已经是 Retina 屏了，至于 Android 可以看下此前 Google 官方公布的数据：
从上面可以看出，高分屏和超分屏已经是主流了，具体的适配范围还是看各自的项目和定位吧。
讲了这么多，有人可能会疑惑为什么这些都不是用在 CSS 中的？别急，慢慢来，现在就介绍如何
在样式中运用，按照上述屏幕分辨率的四种划分，我们可以看到基本可以舍弃 ldpi 了。/* 中分辨率屏幕 */
/*高分辨率屏幕*/
/*超高分辨率屏幕（传说中的 Retina 屏）*/
上面就是在 css 中的用法，把我们需要的 css 代码包含在大括号中就能用了，是不是很方便的样
子%>_<%。当然我们还可以用到之前提供的几个特性，如下：
针对视口宽度不大于 768 像素的情况加载大括号中的样式。
虽然我们可以把设备的分辨率可以分为这几类，但是屏幕的尺寸实在太多，如果针对每一种尺寸
写一种样式，我觉得设计师和前端面不用干别的了，因为开发成本实在太大，而且没有必要，我们只
需要针对绝大多数的设备结合媒体查询和弹性布局来调整，减少开发成本。
新增属性
现在移动端两大阵营 ios 和 android 都是基于 webkit 内核的，而 webkit 内核对 CSS3 的支持走
在了前面，在这里我们可以抛开翔一样的 ie 家族，尽情享受多彩绚丽 CSS3 世界吧！
CSS3 给我们带来了如：文字阴影（text-shadow）、盒子阴影（box-shadow）、圆角（border-radius）、
背景渐变（background: linear-gradient(#000, #fff)）、2D 变换（transition）、动画（animation）
等大家耳熟能详的常用属性外，还有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、
-webkit-tap-highlight-color、-webkit-box-reflect