在H5项目中有一种常见的宣传页，就是那种整屏整屏的，带着炫丽进场动画的移动宣传页，不仅是一种欣赏也起到了很大宣传作用。

对于这种整屏的适配，前面通过视口的兼容处理也是可以做到的，但是在窄屏下会在上下有明显的切割，于是想到既然是保证内容在整屏，那是不是只要保证高度在整屏内就完美了，不管屏幕怎么小整个高度被填在屏幕内，于是就有了这一种适配方案：

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>主结构&适配方案3</title>

<meta charset="utf-8">

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

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

    <style>

        body{

            margin:0;

            background:#000;

        }

        h3,p,ul{

            margin:0;

            padding:0;

        }

        /*****必须要加的样式 S*****/

        html,body{

            width:100%;

            height:100%;

            overflow:hidden;

            position:relative;

        }

        .wrap{

            width:640px;

            height:960px;

            position:absolute;

            left:50%;

            margin-left:-320px;

        }

        /*****必须要加的样式 E*****/

        .wrap{

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

            padding:0 50px;

            background:#ccc;

            overflow:hidden;

            line-height:36px;

            font-size:22px;

        }

        .aside_left,.aside_right{

            width:270px;

            height:80px;

            float:left;

            color:white;

            line-height:80px;

            font-size:26px;

            text-align:center;

        }

        .aside_con{

            width:540px;

            height:80px;

            oveflow:hidden;

            background:blue;

            color:white;

            line-height:80px;

            font-size:30px;

            text-align:center;

        }

        .aside_left{

            background:red;

        }

        .aside_right{

            background:green;

        }

        h3{

            font-size:28px;

            line-height:40px;

        }

    </style>

</head>

<body>

    <div id="wrap" class="wrap">

        <!--适配主逻辑 S-->

        <script type="text/javascript">

            //适配函数

            function reset(){

                var wrapo=document.getElementById('wrap'),

                      clientH=document.documentElement.clientHeight || document.body.clientHeight,

                      designH=960,

                      scaleRate=clientH/designH;

                wrapo.style.cssText="-webkit-transform-origin:50% 0;webkit-transform:scale("+scaleRate+");transform-origin:50% 0;transform:scale("+scaleRate+");"

            }

            //初始进来执行一次适配

            reset();

            //当屏幕旋转的时候，再次执行一次适配

            window.addEventListener('resize',function(){

                setTimeout(function(){reset();},100);

            },false)

        </script>

        <!--适配主逻辑 E-->

        <!--示范结构 S-->

        <div class="aside_con">

            <div class="aside_left">示范块内容0</div>

            <div class="aside_right">示范块内容1</div>

        </div>

        <div class="aside_con">整条示范内容2</div>

        <!--示范结构 E-->

    </div>

</body>

</html>

适配说明：

1：主要是通过保证高度永远在当前屏幕高内来实现适配各屏幕，宽度自适应，其中960为设计稿的高度，如果你的稿是1130，换成1130即可，同时要把html,body的宽高设为100%，overflow:hidden;隐藏滚动条，再把主内容宽高设为设计稿的长宽，水平居中在屏幕中。

2：主要的适合场景用在一些移动端的那种翻页形式活动宣传页及H5小游戏，但是在小屏下，就像iphone4下会出现二边为body背景色的问题），但是对使用无影响！
此种适配方式尽量跟UI沟通，保证主内容往中间靠，因为在大屏下会出现左右有裁剪的情况，如设计稿是640宽，推荐主内容在中间520内，左右二边放无关紧要的装饰元素。这也是我平时用来开发整屏H5的适配方式。

以上代码归属于我的github常用H5代码整理项目（详见其中adaptationMode/mode3/index.html）：https://github.com/xw5/mobile-code/

欢迎clone,欢迎star,一起学习，一起进步！

H5常用代码：适配方案3的更多相关文章

  1. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  2. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  3. H5常用代码：适配方案5

    此方案跟方案4是同一原理,也是通过REM实现的,能单独归类出一个方案,是因为它有一定的实用价值,当你遇到追求完美,追求到一像素的UI或者产品时,那此方案将解决你的困境. 方案5主要是用来解决一像素边框 ...

  4. H5常用代码：适配方案4

    前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正 ...

  5. H5常用代码：适配方案2

    前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接 ...

  6. H5常用代码：适配方案1

    在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始.从此篇博客开始会连续记录下我经常用到的一些适配方案. 对于传统的PC项目,直接在移动端打开也都是会以视 ...

  7. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  8. h5 移动端适配方案思考

    基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...

  9. H5常用代码：页面框架

    万变不离其宗,道法自然! 虽然H5的小项目一波又一波,但有一个东东基本没什么变化,那就是整个页面的框架结构. 我所常用的H5常用页面框架如下: <!DOCTYPE html> <ht ...

随机推荐

  1. C语言小练习三

    题目要求: 定义一个二维数组保存 10个学生的5门课成绩,分别用函数实现:(1)input():输入每个学生的成绩:(2)output():输出每个学生的成绩:(3)aver_stu():计算并输出每 ...

  2. Spring aop 原始的工作原理的理解

    理解完aop的名词解释,继续学习spring aop的工作原理. 首先明确aop到底是什么东西?又如何不违单一原则并实现交叉处理呢? 如果对它的认识只停留在面向切面编程,那就脏了.从oop(Objec ...

  3. js 变量提升和函数提升原理

    关于js的变量,开始的时候我们都会被告知,变量声明应该在引用该变量之前.关于为什么要这样做呢,开始的时候本着会用就行的目的,也没去深究.不过后来经常会发现一些让人很费解的..姑且称为现象吧.先看一段代 ...

  4. sqlserver的IO性能检查

    这一个月老被一个信息科科长纠缠,原因就是他们的sql server 2008 R2老是定期的写入性能低下.我是这样认为的,但身边的人似乎都不这么想.每每我对那个挂在一个交换机上的网络存储表达担忧时,这 ...

  5. hdu 3397 Sequence operation（线段树：区间更新）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3397 题意:给你一个长度为n的0,1序列,支持下列五种操作, 操作0(0 a b):将a到b这个区间的 ...

  6. JAVA设计模式--抽象工厂模式

    抽象工厂设计模式 1.系统中有多个产品族,而系统一次只可能消费其中一族产品2.同属于同一个产品族的产品以其使用.来看看抽象工厂模式的各个角色(和工厂方法的如出一辙):抽象工厂角色: 这是工厂方法模式的 ...

  7. mysql 索引问题

    转自http://www.blogjava.net/happyenjoylife/archive/2011/12/17/366639.html mysql innodb存储与索引的总结 Innodb存 ...

  8. zTree的功能解析

    zTree ,一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.兼容 IE.FireFox.Chrome 等浏览器, ...

  9. (原创)Louis Aston Knight 的家(摄影，欣赏)

    本文图片转自腾讯文化:www.cal.qq.com 1.Abstract     记忆中的家,深情刻画. 2.Content 图1 图2 图3 图4 图5 图6 图7 图8 图9 图10 图10 图1 ...

  10. 使用vim在Linux下编写C语言程序

    1.进入字符界面 2.创建文件夹用于存放源文件 mkdir helloworld    //创建文件夹命令 cd helloworld        //进入新建的文件夹,这里应该说目录比较好,win ...