在工作中接到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,一起学习，一起进步！

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

  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常用代码：适配方案3

    在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有 ...

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

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

  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. 解决方法:An error occurred on the server when processing the URL. Please contact the system administrator

    在WINDOWS7或SERVER2008上安装了IIS7.5,调试ASP程序时出现以下错误: An error occurred on the server when processing the U ...

  2. [2015hdu多校联赛补题]hdu5371 Hotaru's problem

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 题意:把一个数字串A翻过来(abc翻过来为cba)的操作为-A,我们称A-AA这样的串为N-se ...

  3. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  4. (十) 一起学 Unix 环境高级编程 (APUE) 之 线程控制

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  5. POJ 3180-The Cow Prom (图论-有向图强联通tarjan算法）

    题目大意:有n个牛在一块, m条单项绳子, 有m个链接关系, 问有多少个团体内部任意两头牛可以相互可达 解题思路:有向图强连通分量模版图 代码如下: #include<stdio.h> # ...

  6. node.js 基础学习 express安装使用

    安装好nodeJs,我们需要使用命令行中安装express. 我这里默认将Node.js安装在C:\Program Files\nodCejs\盘中. 在保持联网的状态下,依次输入如下命令. npm ...

  7. Linux命令（1）- grep

    1.grep 功能:查找文件里符合条件的字符串. 语法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数& ...

  8. linux ddos防御攻击

    Linux Ddos防御攻击 [root@lxh ~]# netstat -ntu |awk '{print $5}'|grep '[0-9]'|cut -d: -f1 |sort |uniq -c| ...

  9. CentOS 6.3 安装 phpmyadmin

    安装phpMyAdminphpMyAdmin是一个网络接口,通过它可以管理你的MySQL数据库.首先,我们使CentOS系统RPMForge软件库的phpMyAdmin,而不是官方的CentOS 6. ...

  10. Python.Scrapy.12-scrapy-source-code-analysis-part-2

    Scrapy 源代码分析系列-2 signals, signalmanager, project, conf 1. 模块: signals.py signalmanager.py project.py ...