web前端之移动端适配

该段代码是将所有的移动端屏幕都缩放成640px，不需要再考虑适配。

<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)) {
var version = parseFloat(RegExp.$1);
if(version > 2.3) {
var phoneScale = parseInt(window.screen.width) / 640;
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
//微信去掉下方刷新栏
if(navigator.userAgent.indexOf('MicroMessenger') >= 0) {
document.addEventListener('WeixinJSBridgeReady', function() {
//WeixinJSBridge.call('hideToolbar');
});
}
</script>

在微信H5里面如果用到二维码的识别，就会出现二维码定位不准的问题，识别不了二维码，这个在安卓端是完全没有问题的。由于苹果机的手机分辨率比较大，如果二维码出现在屏幕的下方时，识别不了。

html代码：

<div class="codegroup">
<p class="mac"><img src="images/mac.png"></p>
<span>demo</span>
</div>

css如下：

.codegroup{
background-color: #343434;
font-size: 25.5/16rem;
width: 320px;
padding: 6px 6px 0 6px;
margin: 45px auto;
p{
position: relative;
height: 308px;
background: transparent url(../images/tj/tj-code.jpg) no-repeat;
background-size: contain;
}
p.dw-code{
background-image: url(../images/dongwanligong/dw-code.jpg);
}
p.gjd-code{
background-image: url(../images/guangjidian/wjd-code.jpg);
}
p.tjdj-code{
background-image: url(../images/tjdaxueruanjian/tjdrj-code.jpg);
}
p.zd-code{
background-image: url(../images/zhongda/zd-code.png);
}
p.mac{
background-image: url(../images/mac.png);
}
img{
position: absolute;
top: -60%;
width: 100%;
border: 1px solid red;
opacity: 0;
}
span{
display: inline-block;
text-align: center;
padding: 20px 0;
width: 100%;
}
}

根据内容调整padding里面的值。