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

  1. 云栖社区>
  2. 博客列表>
  3. 正文

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

白树 2016-04-29 15:53:20 浏览1590 评论0

摘要: 目录(更新于20151013) 原理及说明 github地址 真实案例 contain模式(推荐) cover模式 auto模式(默认模式) 结合fullPage滑屏框架的例子 快速上手   原理及说明 使用transform:scale缩放页面,要求视觉稿高清 页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面 兼容性良好,支持ios4+、android2.

目录(更新于20151013)

 

原理及说明

  • 使用transform:scale缩放页面,要求视觉稿高清
  • 页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面
  • 兼容性良好,支持ios4+、android2.3+、winphone8+系统
  • 大小1k,零依赖
  • 三种适配模式可选 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">

启用插件代码示例一:

<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.onload = window.onresize = function(){
    pageResponse({
        selectors: '.page',     //模块的类名,使用class来控制页面上的模块(1个或多个)
        mode : 'contain',     // auto || contain || cover 
        width : '640',      //输入页面的宽度,只支持输入数值,默认宽度为320px
        height : '1008'      //输入页面的高度,只支持输入数值,默认高度为504px
    })
}
复制代码

demo下载

 

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

祝大家粽子节快乐~

作者:白树

出处:http://peunzhang.cnblogs.com/

【云栖快讯】你想见的Java技术专家都在这了,向大佬提问,有问题必答  详情请点击

网友评论

白树
文章80篇 | 关注2
关注
移动测试(Mobile Testing)是为广大企业客户和移动开发者提供真机测试服务的云平台... 查看详情
基于大数据的移动云服务。帮助App快速集成移动推送的功能,在实现高效、精确、实时的移动推送的... 查看详情
阿里云针对移动应用推出的无线加速产品,旨在依托阿里云遍布全网的加速节点,海量带宽网络等优越的... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云总监课正式启航

阿里云总监课正式启航