标签：
前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在，在许多场合不尽如人意，会在低版本安卓上出现，不缩放，手动缩放未禁止的问题。
于是出现了第二种适配方案，既然通过视口缩放可以兼容，那为什么不直接用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,一起学习，一起进少
标签：
原文地址：http://www.cnblogs.com/xwwin/p/5774885.html
