前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在，在许多场合不尽如人意，会在低版本安卓上出现，不缩放，手动缩放未禁止的问题。
于是出现了第二种适配方案，既然通过视口缩放可以兼容，那为什么不直接用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,一起学习，一起进少
时间： 2024-08-10 19:05:44