移动端网页中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;