【原】pageResponse - 让H5适配移动设备全家(移动端适配)

时间 2019-11-06

原文原文链接

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

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

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

目录(更新于20151013)

原理及说明

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

github地址

https://github.com/peunzhang/pageResponse ios

真实案例

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

contain模式（推荐）

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

预览github

cover模式

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

预览浏览器

auto模式（默认模式）

保持页面的宽高比，调整页面的宽度，使页面宽度彻底包含在浏览器窗口中前端工程师

预览框架

结合fullPage滑屏框架的例子

预览ide

快速上手

meta的viewport设置：

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

启用插件代码示例一：

<div class="page">
    <img src="img/demo1.jpg" alt="" width="320" height="504">
    <h1>你必定也有过一个翱翔天际的梦1</h1>
    <p>-  回家，或踏上旅途，飞机是自由的符号  -</p>
</div>

//视觉稿尺寸是640px*1008px，页面样式是以视觉稿尺寸除以2来计算，那么输入页面的宽度为320px和高度为504px
window.onload = window.onresize = function(){
    pageResponse({
        selectors: '.page',     //模块的类名，使用class来控制页面上的模块(1个或多个)
        mode : 'contain',     // auto || contain || cover 
        width : '320',      //输入页面的宽度，只支持输入数值，默认宽度为320px
        height : '504'      //输入页面的高度，只支持输入数值，默认高度为504px
    })
}

启用插件代码示例二：

<!-- 2个模块（包含隐藏的）都包含class:page，pageResponse可对这2个模块起做用 -->
<div class="page">
    <img src="img/demo1.jpg" alt="" width="640" height="1008">
    <h1>你必定也有过一个翱翔天际的梦1</h1>
    <p>-  回家，或踏上旅途，飞机是自由的符号  -</p>
</div>

<div class="page hide">
    <p>是否还记得她</p>
    <img src="img/logo.jpg" alt="" width="40" height="40">
    
</div>

//视觉稿尺寸是640px*1008px，页面样式是以视觉稿原始尺寸来计算，那么输入页面的宽度为640px和高度为1008px
window.onresize = function(){
    pageResponse({
        selectors: '.page',     //模块的类名，使用class来控制页面上的模块(1个或多个)
        mode : 'contain',     // auto || contain || cover 
        width : '640',      //输入页面的宽度，只支持输入数值，默认宽度为320px
        height : '1008'      //输入页面的高度，只支持输入数值，默认高度为504px
    })
}
document.addEventListener("DOMContentLoaded", function() {
    pageResponse({
        selectors: '.page',     //模块的类名，使用class来控制页面上的模块(1个或多个)
        mode : 'contain',     // auto || contain || cover 
        width : '640',      //输入页面的宽度，只支持输入数值，默认宽度为320px
        height : '1008'      //输入页面的高度，只支持输入数值，默认高度为504px
    })
});

demo下载

欢迎你们使用，插件还有不少的不足，对于复杂的页面并不合适，具体结合实际项目，任何问题欢迎留言探讨~

祝你们粽子节快乐~