H5常用代码：适配方案3

在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,一起学习，一起进步！

posted @ 2016-08-17 00:20  ！win ！  阅读(511)  评论(0)  编辑  收藏  举报