首页 > 代码库 > 移动端页面宽度自适应
移动端页面宽度自适应
<!-- js -->
<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><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="wrapper"> <section> <div class="bg"></div> </section> </div> </body> </html>
body,html{width: 100%;overflow: hidden;height: 100%;}
#wrapper { position: relative; height:auto; overflow: hidden; width:640px; margin:0 auto;display: none; }
section { position: relative; width:640px; height: 1008px; overflow: hidden;z-index: 1; }
section .bg { position: absolute; left:0; top: 0; width: 100%; height: 1008px; background-size:auto 1008px;z-index: 1;}本文出自 “陈辉” 博客，请务必保留此出处http://chenhuixfyy.blog.51cto.com/6136934/1591024
移动端页面宽度自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。