移动端网页中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
缘来天注定,缘去人自夺。种如是因,收如是果,一切唯心造。笑言面对,不去埋怨。悠然、随心、随性、随缘。