H5常用代码：适配方案1

在工作中接到H5项目，第一件想到的事就应该是屏幕适配问题，解决了屏幕适配，接下来的事才能真正开始。从此篇博客开始会连续记录下我经常用到的一些适配方案。

对于传统的PC项目，直接在移动端打开也都是会以视口980来自动缩放以显示主内容在屏幕内，既然有这么个特性，那自然适配也就可以通过通过控制视口来达到适配的目地。

以下是我工作中经常用到的第一种移动端适配方案：

<!DOCTYPE html>
<html>
<head>
<title>适配方案1</title>
<meta charset="utf-8">
<meta content="width=640,user-scalable=no,target-densitydpi=device-dpi" 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;
        }
        .wrap{
            width:640px;
            overflow:hidden;
            line-height:36px;
            font-size:24px;
        }
        .aside_left,.aside_right{
            width:320px;
            height:160px;
            float:left;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_con{
            width:640px;
            height:160px;
            background:blue;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_left{
            background:red;
        }
        .aside_right{
            background:green;
        }

    </style>
</head>
<body>
    <div id="wrap" class="wrap">

        <!--示范结构 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：它使用了viewport视口的特性，手机会保证内容在一个视口内显示，把视口设计成你设计稿的宽度，如当你设计稿是640的时候你就按640PX宽来布局，如果是750的你就按750PX来布局，里面全用像素单位，回归到了PC的像素单位时代
2：主要的适合用在一些移动端的活动宣传页，要求上线快，下的也快的那些页面，即保证了速度也保证了开发成本，用来做功能页也是问题不大的
3：有一定的兼容风险，如果只是在微信里用的，这种适配方式就是你的菜，如果要兼容安卓低版本的一些手机原生浏览器，那这种适配方式不太适合。

我有遇到的一个场景是：公司的宣传页不但要放在微信里宣传，而且还要内嵌放到安卓APP里宣传，而安卓APP是调用手机的默认浏览器的，
虽然target-densitydpi=device-dpi是来解决安卓低版本兼容的，但是还是会有一些小差距，并不能保证内容在一屏宽度内，而且浏览器还能手动缩放，
当时不得已修改方案，考虑到修改的大小，后面使用适配方案2来解决的

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

如果要做整屏切换效果，需要做一些CSS配合

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>适配方案1全屏</title>    
<meta charset="utf-8">
<meta content="width=640,user-scalable=no,target-densitydpi=device-dpi" 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>
        /* 整屏适配必须需要的样式 S*/
        html,body{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .wrap{
            width:640px;
            height:100%;
            overflow:hidden;
            background:url(bg.jpg) no-repeat center 0;
            -webkit-background-size:cover;
            background-size:cover;
        }
        /*整屏适配必须需要的样式 E*/
        *{
          margin:0;
          padding:0; 
        }
        .wrap{
           line-height:36px;
            font-size:24px; 
            color:#fff;
        }
        .aside_left,.aside_right{
            width:320px;
            height:160px;
            float:left;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_con{
            width:640px;
            height:160px;
            background:blue;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_left{
            background:red;
        }
        .aside_right{
            background:green;
        }
    </style>
</head>
    <body>
     <div id="wrap" class="wrap">

        <!--示范结构 S-->
        <div class="aside_con">
            <div class="aside_left">示范块内容0</div>
            <div class="aside_right">示范块内容1</div>
        </div>
        <!--示范结构 E-->

    </div>
</body>
</html>

整屏适配说明：

此处是常用的专题页整屏适配，整屏的话需要设置html,body{width:100%;height:100%;oveflow:hidden;}去掉X&Y方向滚动条，同时通过把背景大小设置为background-size:cover;来保证背景占满整屏，同时使用background-position:center 0;来保证背景居中，左右裁剪，背景本身是装饰裁剪也无大碍的，此适配的需要把主内容尽可能的居中，以避免被裁剪掉

 

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

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

 

posted @ 2016-08-15 02:13  ！win ！  阅读(2777)  评论(0)    收藏  举报