H5常用代码：适配方案2

最新推荐文章于 2024-10-17 09:40:47 发布

weixin_30457065

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xwwin/p/5774885.html

版权

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

于是出现了第二种适配方案，既然通过视口缩放可以兼容，那为什么不直接用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,一起学习，一起进步！

转载于:https://www.cnblogs.com/xwwin/p/5774885.html