viewport 使用笔记 - 1

近期的新项目，设计初期打算引入响应式设计，前期我们也做了部分调查和实验。分析了一下，有一个困扰的问题就是，你的站需不需要响应式设计？但是，我们目前打算是今后的移动终端端也能直接使用目前的设计（一次设计），而不需要再花费精力去重新设计和实现（普遍适用）。

有了这些需求之后，就不再纠结了，配合设计组的同学，我们初步定了一下实施计划，目前只是做尝试性的准备工作，构建了部分基础测试页，在各种分辨率的设备中测试了一下，达到了预期的展示效果，但是后期拿到具体内容之后，还得细细的琢磨，重构之。

以下就来记录一下，工作之中遇到的问题。

上一个版本的项目，后期改版中使用了 1200px 总宽设计，当然这里只考虑了 monitors 中的应用场景。在接到这个需求之后，好吧直接上手改了 container 的宽度。当然，前提是已经忽略掉了小分辨率的 monitors（低于这个分辨率，出现横向滚动条），所以后期的分辨率测试工作就省事多了，而且正常的展示效果也不错，因为站点的页面正好是内容展示型的，相比之下，内容是多了一部分。

接下来就测试 phone，tablets，然后等待我的是。。。

当然了不会原样缩小，乖乖的占满整个屏幕。好吧，那我缩小一下，然而部分内容在我 resize 之后，并没有渲染出来。这时我才意识到了问题的严重性，看来针对移动终端得特殊处理一下。Google 之后才得知各设备的 device-width [^1]。viewport 标签就是针对移动终端所制定的吧，提升页面在移动设备上的表现能力。让页面的宽度和初始比例可以和移动设备相匹配。

这下问题就迎刃而解了。

iOS上的Safari在加载网页时默认会自动将页面宽度设为980像素，这是大多数固定宽度网页的尺寸。随后Safari会缩小页面，以便适合在320或480像素宽的视口中显示。

后续搜索，并测试了，Android 设备默认 viewport-width 是 800px。（Windows Phone 设备则为 1024px，这个 google 得来的，手头并没有设备）。下面这个标签的前世今生，就不做说明了，有兴趣的可以自己去查。

1	<meta name="viewport" content="width=device-width">

上面只是基础定义，下面列举一些基本属性，后续需要自己去慢慢研究了。

initial-scale: 初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale: 允许用户缩放到的最大比例
minimum-scale: 允许用户缩放到的最小比例
user-scalable: 用户是否可以手动缩放
…

我们页面的宽度是1200，所以在初始的时候定义content="width=1200"就搞定了，浏览器会自动缩小页面，以便适合在 320px 尺寸的 viewport 中显示。iPhone，iPad的横竖屏中，device-width 都不相同，这个在相应式设计中得充分考虑到。

这次研究也就到这里了，下期准备放出我们最近测试后的响应式布局方案，这个 viewport(只是初始化) 和 css3 中的 media query 简直就是天生一对。