前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在，在许多场合不尽如人意，会在低版本安卓上出现，不缩放，手动缩放未禁止的问题。

于是出现了第二种适配方案，既然通过视口缩放可以兼容，那为什么不直接用CSS3的缩放来做了，因些有以下适配方案，代码如下：

<!DOCTYPE html>

<html>

<head>

<title>适配方案2</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;

        }

        .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-->

        <script type="text/javascript">

            //适配函数

            function reset(){

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

                      clientW=document.documentElement.clientWidth || document.body.clientWidth,

                      designw=640,

                      scaleRate=clientW/designw;

                wrapo.style.cssText="-webkit-transform-origin:0 0;transform-origin:0 0;webkit-transform:scale("+scaleRate+");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：从适配字面上来讲，就是保证用户在屏幕内能看到完整页面内容，那是不是只要根据可视宽跟内容宽的比值来缩放即可，例如设计稿是640，当可视屏幕宽是320的时候，就也就把640的内容放到320内即可，就是缩放0.5即可实现，这也就是这次适配的原理。在一直倡导head放样式，JS 放最底部的优化条例的情况下，此处又适配的代码放在wrap元素下，主要是为了解决内容一加载出来又突然缩放，导致有闪烁的问题。

2：主要的适合场景用在一些移动端的活动宣传页，特别是那种纯内容的长的宣传页，要求上线快，下的也快的那些页面，即保证了开发速度也保证了开发成本，用在功能型页面也是很合适的，因为兼容不错，不会像用视口来缩放适配一样放弃一些低版本安卓原生浏览器，但是有一个场景，当给父元素使用transform的时候，字元素的固定定位会失效，如果想用固定定位可以移到缩放元素外面来做，单独做适配或者直接用JS模拟fixed效果。

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

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

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

  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常用代码：适配方案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语言的选择和循环上机题目（部分）

    /*(1)某市不同车牌的出租车3公里的起步价和计费分别为:夏利7元/公里,3公里以外2.1元/公里:富康8元/公里,3公里以外2.4元/公里:桑塔纳9元,3公里以外2.7元/公里.编程:从键盘输入乘车 ...

  2. CentOS 7下MySQL安装配置

    安装: #centos 7 yum install -y mariadb mariadb-server mariadb-devel #debian 8 apt-get install nginx ma ...

  3. Win7 64位 VS2013环境编译Lua5.3.1

    主要参考这篇文章,原文有几个错误顺便改正了. 在Windows下使用Visual Studio编译Lua5.3 写本文时Lua官方网站放出的新版本为5.3.1,然后我不知道为啥,神奇的国内不能访问Lu ...

  4. 【转载】【树形DP】【数学期望】Codeforces Round #362 (Div. 2) D.Puzzles

    期望计算的套路: 1.定义:算出所有测试值的和,除以测试次数. 2.定义:算出所有值出现的概率与其乘积之和. 3.用前一步的期望,加上两者的期望距离,递推出来. 题意: 一个树,dfs遍历子树的顺序是 ...

  5. jsp页面格式时间yy-mm-dd

    这个问题把我花了1小时都没弄出来  各种报错  还是最后同学告知才知道的. 导入  :<%@ taglib uri="http://java.sun.com/jsp/jstl/func ...

  6. 核心动画（CAKeyframeAnimation）

    Main.storyboard ViewController.m // //  ViewController.m //  8A02.核心动画 - CAKeyframeAnimation // //  ...

  7. src与 href 的一些区别

    src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求 src 资源时会将其指 ...

  8. BZOJ2888 资源运输（LCT启发式合并）

    这道题目太神啦! 我们考虑他的每一次合并操作,为了维护两棵树合并后树的重心,我们只好一个一个的把节点加进去.那么这样一来看上去似乎就是一次操作O(nlogn),但是我们拥有数据结构的合并利器--启发式 ...

  9. libev安装与示例程序编译运行

    Linux平台C网络编程,之前总是看各大名著(如UNIX环境高级编程和UNIX网络编程,还有TCP/IP详解 卷1:协议和深入理解计算机系统(原书第2版)),同时写点小程序练习.然而还是拿不出手. 参 ...

  10. java调用Linux命令报错：java.io.IOException: Cannot run program "ps": CreateProcess error=2, ?????????

    在idea里面,java代码:Runtime.getRuntime().exec("ps -aux") 是因为默认是用windows平台运行了,所以报错,得改成调用Linux平台运 ...