轻松使用px为单位开发移动端页面

2016-11-29  本文已影响132人  MenChem

meta默认设置(其他的meta就根据项目需求定):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

CSS代码:
.wrap{width:320px;margin:0 auto;}//width:320px,可以根据当前设计稿来定,可以是640、750等尺寸

下面一段js代码放入网页头部,例如:设计稿尺寸是640只需要把320全部改成640就ok了:

var phoneWidth =  parseInt(window.screen.width);
var phoneScale = phoneWidth/320;
var ua = navigator.userAgent;
 if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write('<meta name="viewport" content="width=320, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=320, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=device-dpi">');
 }

为兼容性考虑,在页面下面加入下面js,其中wrap为包裹结构最外层的ID,wrap给它320的宽度居中就ok了:

 if(navigator.appVersion.indexOf('Android') != -1){
        document.addEventListener("DOMContentLoaded",function(e){
            document.getElementById('wrap').style.zoom = e.target.activeElement.clientWidth/320;
        });
    };

上一篇下一篇

猜你喜欢

热点阅读