移动端网页中ViewPort的使用

  <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>

 

<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no" /> 

 

<meta content="target-densitydpi=320, width=device-width, user-scalable=no" name="viewport">

 

如何使移动手机网页根据固定的比例进行放大或者缩小呢？

首先在ViewPort中定义设备宽度等于固定宽度。

<meta name="viewport"
            content="target-densitydpi=device-dpi, width=320px, user-scalable=no" />

Android中是根据DPI来显示页面，使用JS设置一下DPI

function setAndroidDpi(){
                var sUserAgent = navigator.userAgent.toLowerCase();  
                var bIsAndroid = sUserAgent.match(/android/i) == "android"; 
                if(bIsAndroid){
                    var uiWidth = 320, deviceWidth = screen.width,getTargetDensitydpi,targetDensitydpi;
                    getTargetDensitydpi = uiWidth / deviceWidth * window.devicePixelRatio * 160;
                    targetDensitydpi = 'target-densitydpi=' + getTargetDensitydpi + ', width=device-width, user-scalable=no';
                    //alert("deviceWidth:" + deviceWidth + "width:" + screen.width + ",userAgent:" + sUserAgent + ",bIsAndroid:" +  bIsAndroid + ",getTargetDensitydpi:" + getTargetDensitydpi + ",targetDensitydpi:" + targetDensitydpi);
                    document.getElementsByName('viewport')[0].setAttribute('content', targetDensitydpi );
                }
            }
            
            //setAndroidDpi();
            
            window.onresize = function(){
                setAndroidDpi();
            }

 --------------------------------------------------------------------

根据Em写的网页，修改html和body的font-size来让网页自动缩放

function init() {
    var pageWidth = window.innerWidth,
        uiPageWidth = 640,
        initSize = 16,
        baseSize = 0;
    if (window.navigator.userAgent.indexOf("Windows NT") > -1 && pageWidth >= uiPageWidth) {
        baseSize = initSize;
    }else{
        baseSize = initSize * (pageWidth / uiPageWidth);
    }
    document.getElementsByTagName("body")[0].style.fontSize = baseSize + "px";
    document.getElementsByTagName("html")[0].style.fontSize = baseSize + "px";
}

init();

window.onresize = init;

 

参考：

　　ViewPort定宽缩放部分参考自：http://www.cnblogs.com/plums/archive/2013/01/10/2855070.html