在H5项目中有一种常见的宣传页，就是那种整屏整屏的，带着炫丽进场动画的移动宣传页，不仅是一种欣赏也起到了很大宣传作用。
对于这种整屏的适配，前面通过视口的兼容处理也是可以做到的，但是在窄屏下会在上下有明显的切割，于是想到既然是保证内容在整屏，那是不是只要保证高度在整屏内就完美了，不管屏幕怎么小整个高度被填在屏幕内，于是就有了这一种适配方案：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>主结构&适配方案3</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;
background:#000;
}
h3,p,ul{
margin:0;
padding:0;
}
/*****必须要加的样式 S*****/
html,body{
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.wrap{
width:640px;
height:960px;
position:absolute;
left:50%;
margin-left:-320px;
}
/*****必须要加的样式 E*****/
.wrap{
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:0 50px;
background:#ccc;
overflow:hidden;
line-height:36px;
font-size:22px;
}
.aside_left,.aside_right{
width:270px;
height:80px;
float:left;
color:white;
line-height:80px;
font-size:26px;
text-align:center;
}
.aside_con{
width:540px;
height:80px;
oveflow:hidden;
background:blue;
color:white;
line-height:80px;
font-size:30px;
text-align:center;
}
.aside_left{
background:red;
}
.aside_right{
background:green;
}
h3{
font-size:28px;
line-height:40px;
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<!--适配主逻辑 S-->
<script type="text/javascript">
//适配函数
function reset(){
var wrapo=document.getElementById(‘wrap‘),
clientH=document.documentElement.clientHeight || document.body.clientHeight,
designH=960,
scaleRate=clientH/designH;
wrapo.style.cssText="-webkit-transform-origin:50% 0;webkit-transform:scale("+scaleRate+");transform-origin:50% 0;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：主要是通过保证高度永远在当前屏幕高内来实现适配各屏幕，宽度自适应，其中960为设计稿的高度，如果你的稿是1130，换成1130即可，同时要把html,body的宽高设为100%，overflow:hidden;隐藏滚动条，再把主内容宽高设为设计稿的长宽，水平居中在屏幕中。
2：主要的适合场景用在一些移动端的那种翻页形式活动宣传页及H5小游戏，但是在小屏下，就像iphone4下会出现二边为body背景色的问题），但是对使用无影响！
此种适配方式尽量跟UI沟通，保证主内容往中间靠，因为在大屏下会出现左右有裁剪的情况，如设计稿是640宽，推荐主内容在中间520内，左右二边放无关紧要的装饰元素。这也是我平时用来开发整屏H5的适配方式。
以上代码归属于我的github常用H5代码整理项目（详见其中adaptationMode/mode3/index.html）：https://github.com/xw5/mobile-code/
欢迎clone,欢迎star,一起学习，一起进少
时间： 2024-10-08 10:08:51