上一篇文章《为什么选择iPhone5的分辨率作为H5视觉稿尺寸》最后留下了问题：是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢？按照自己以前的方法，通常会要求设计师设计2套的尺寸，一套是窄屏手机(如iPhone4)，另一套是宽屏手机(如iPhone5)，这样的好处不仅减少重构页面的适配成本外，也在页面展现上提升页面的用户体验。

然而不管是设计2套还是3套以上的视觉稿来辅助前端来完成页面，最终还是会抵挡不住设备更新换代带来的适配问题，移动设备不断从低分辨率到高分辨率过渡，不同分辨率尺寸差异越来越大，适配越来越头疼。

亲，你还在为以上事情烦恼吗？来~请使用新鲜出炉的pageResponse.js，一套视觉稿适配移动设备全家，让烦恼通通见鬼去！！！

目录

• 原理及说明
• github地址
• 真实案例
• contain模式（推荐）
• cover模式
• auto模式（默认模式）
• 结合fullPage滑屏框架的例子
• 快速上手

原理及说明

• 使用transform:scale缩放页面，要求视觉稿高清
• 页面以px为单位即可让h5适配各种移动设备，适配原则根据视觉稿比例缩放页面
• 兼容性良好，支持ios4+、android2.3+、winphone8+系统
• 框架大小1.22k，零依赖
• 三种适配模式可选 auto || contain || cover

github地址

https://github.com/peunzhang/pageResponse 

真实案例

不同手机看效果，同一手机切换横竖屏看效果

contain模式（推荐）

• 保持页面的宽高比，调整页面的宽度或高度（较大者），使页面完全包含在浏览器窗口中
• 页面水平垂直居中，左右或上下可能出现空白，页面背景使用纯色或可复制背景可解决此类问题
• 适合滑屏页面、单屏页面

预览

cover模式

• 保持页面的宽高比，调整页面的宽度或高度（较小者），使页面完全覆盖浏览器窗口
• 页面水平垂直居中，超出浏览器窗口左右或上下的内容会被隐藏
• 适合滑屏页面、单屏页面，且页面边缘无重要内容

预览

auto模式（默认模式）

保持页面的宽高比，调整页面的宽度，使页面宽度完全包含在浏览器窗口中

预览

结合fullPage滑屏框架的例子

预览

快速上手

meta的viewport设置：

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

原标题：【原】pageResponse

关键词：response