手机设置viewport附上设置viewport的完整版源码

手机设置viewport，附上设置viewport的完整版源码
注意的地方：要在你的页面CSS要设置body{ display: none; }，目的是在一开始设置viewport的时候先隐藏页面内容，等到viewport设置完毕后再显示页面，这样做是为了避免在设置的过程中使页面出现闪烁，因为我们在测试过程中发现部分设备会出现这个问题。

/* 
 
* 功能: 获取是否横屏 
 
* 参数: N/A 
 
***返回值[boolean]*** 
 
* 横屏: true 
 
* 竖屏: false 
 
*/ 
 
var getIsLandscape = function(){ 
 
var isLandscape = false 
 
,orientation = window.orientation 
 
,ua = navigator.userAgent 
 
,isAndroid = !( ua.match(/iPhone/i) || ua.match(/iPod/i) || ua.match(/iPad/i) ) 
 
,landscape_map = { "90": true, "-90": true } 
 
,portrait_map = { "0": true, "180": true }; 
 
landscape_map[orientation] && (isLandscape = true); 
 
//三星平板 
 
if( window.devicePixelRatio == 1 && isAndroid ){ 
 
portrait_map[orientation] && (isLandscape = true); 
 
} 
 
return isLandscape; 
 
}; 
 
/* 
 
* 功能: 获取安卓系统版本(首位数字) 
 
* 参数: N/A 
 
***返回值[number/NaN]*** 
 
* 非安卓系统: NaN 
 
* 安卓系统: 1, 2, 3, 4... 
 
*/ 
 
var getAndroidVersion = function(){ 
 
var ua = navigator.userAgent; 
 
if( ua.toLowerCase().indexOf("android") == -1 ) return NaN; 
 
//版本号首位数字在ua字符串中的位置 
 
var versionIdx = ua.toLowerCase().indexOf("android") + 8; 
 
var version = parseInt( ua.toLowerCase().substring(versionIdx,++versionIdx), 10); 
 
return version; 
 
}; 
 
/* 
 
* 功能: 获取Android设备的分辨率 
 
* 参数: N/A 
 
***返回值[int/undefined]*** 
 
* Android: 
 
* 横屏获取横向分辨率 
 
* 纵向获取纵向分辨率 
 
* WP/IOS: undefined 
 
*/ 
 
var getAndroidDeviceResolution = function(){ 
 
var resolution = undefined 
 
,androidVersion = getAndroidVersion() 
 
,isAndroid = !isNaN(androidVersion) 
 
,isLandscape = getIsLandscape() 
 
,isNexus7 = window.devicePixelRatio == 1.3312499523162842; 
 
if( isAndroid ){ 
 
// Android 3- 
 
if( androidVersion < 3 ){ 
 
resolution = window.outerWidth; 
 
} 
 
// Android 3+ 
 
else{ 
 
resolution = screen.width; 
 
if(isLandscape){ 
 
//无法获取正确值，故无耐采用硬编码 
 
isNexus7 && ( resolution = 1280 ); 
 
} 
 
} 
 
} 
 
return resolution; 
 
} 
 
/* 
 
* 功能: 获取设备宽度cssPexels 
 
* 参数: N/A 
 
***返回值*** 
 
* WP: undefined 
 
* Android/IOS: number 
 
*/ 
 
var getDeviceWidth_cssPixels = function(){ 
 
var deviceWidth_cssPixels = undefined; 
 
var androidDeviceResolution = getAndroidDeviceResolution(); 
 
var isAndroid = !isNaN(getAndroidVersion()); 
 
if( isAndroid ){ 
 
deviceWidth_cssPixels = androidDeviceResolution / window.devicePixelRatio; 
 
} 
 
var ua = navigator.userAgent; 
 
var isIOS = ua.match(/iPhone/i) || ua.match(/iPod/i) || ua.match(/iPad/i); 
 
if( isIOS ){ 
 
deviceWidth_cssPixels = getIsLandscape() ? screen.height : screen.width; 
 
} 
 
return deviceWidth_cssPixels; 
 
} 
 
/* 
 
* 功能: 获取缩放比 
 
* 依赖: pageWidth_cssPixels 全局变量 
 
* 参数: N/A 
 
***返回值*** 
 
* WP: undefined 
 
* Android/IOS: number 
 
*/ 
 
var getScale = function(){ 
 
var deviceWidth_cssPixels = getDeviceWidth_cssPixels(); 
 
var scale = undefined; 
 
if( typeof deviceWidth_cssPixels == 'number' ){ 
 
scale = deviceWidth_cssPixels / pageWidth_cssPixels; 
 
} 
 
return scale; 
 
} 
 
/* 
 
* 功能: 设置viewPort content属性 
 
* 依赖: pageWidth_cssPixels 全局变量 
 
* 参数: viewPort object 
 
***返回值[N/A]*** 
 
*/ 
 
var setViewPortCnt = function( viewPort ){ 
 
var scale = getScale(); 
 
var isAndroid = !isNaN(getAndroidVersion()); 
 
var ua = navigator.userAgent; 
 
var isIPad = ua.match(/iPad/i); 
 
var isIPhoneOrIPod = ua.match(/iPhone/i) || ua.match(/iPod/i); 
 
var viewPortCnt = ''; 
 
if( isAndroid || isIPad ){ 
 
//Ipad 需要width设置为页面设计稿宽度,Android可以设为device-width 
 
viewPortCnt = 'width=' + pageWidth_cssPixels 
 
+ ', initial-scale=' + scale 
 
+ ', maximum-scale=' + scale 
 
+ ', minimum-scale=' + scale; 
 
} 
 
else if( isIPhoneOrIPod ){ 
 
//IOS5 Iphone 竖屏刷新,转横屏后viewport宽度偏大问题 
 
viewPortCnt = 'initial-scale=' + scale 
 
+ ', maximum-scale=' + scale 
 
+ ', minimum-scale=' + scale; 
 
} 
 
//WP 
 
else{ 
 
viewPortCnt = 'width=' + pageWidth_cssPixels 
 
+ ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; 
 
} 
 
viewPort.setAttribute('content', viewPortCnt); 
 
} 
 
/* 
 
* 功能: 放置好viewport 
 
* 参数: N/A 
 
***返回值[obj]*** 
 
* viewPort 
 
*/ 
 
var placeViewPort = function(){ 
 
var head = document.getElementsByTagName('head')[0]; 
 
var viewPort = document.getElementsByName('viewport')[0]; 
 
if( viewPort === undefined || viewPort === null ){ 
 
viewPort = document.createElement("meta"); 
 
viewPort.setAttribute('name','viewport'); 
 
head.appendChild(viewPort); 
 
}; 
 
return viewPort; 
 
} 
 
/* 
 
* 功能: 清除timeout句柄ID 
 
* 参数: timeOutID array 
 
***返回值[N/A]*** 
 
*/ 
 
var clearTimeOutID = function( timeOutID ){ 
 
if( timeOutID.length > 0 ){ 
 
for( var i = 0; i < timeOutID.length; i++ ){ 
 
clearTimeout( timeOutID.pop() ); 
 
} 
 
} 
 
} 
 
//保存延迟执行代码句柄ID 
 
var timeOutID = []; 
 
/* 
 
* 功能: 设置viewport 
 
* 依赖: timeOutID 全局变量 
 
* 参数: viewPort obj,cb 设置好viewport后的回调函数 
 
***返回值[N/A]*** 
 
*/ 
 
var setViewPort = function(viewPort, cb){ 
 
//避免快速转屏导致堆积延迟执行代码 
 
clearTimeOutID(timeOutID); 
 
var ua = navigator.userAgent; 
 
var isWP = isNaN(getAndroidVersion()) && !( ua.match(/iPhone/i) || ua.match(/iPod/i) || ua.match(/iPad/i) ); 
 
if( isWP ){ 
 
if( viewPort.getAttribute('content') == undefined ){ 
 
setViewPortCnt(viewPort); 
 
if( typeof cb == 'function' ){ cb(); } 
 
} 
 
}else{ 
 
var head = document.getElementsByTagName('head')[0]; 
 
if( viewPort.getAttribute('content') == undefined){ 
 
setViewPortCnt(viewPort); 
 
if( typeof cb == 'function' ){ cb(); } 
 
}else{ 
 
//代码延迟执行时间 
 
var codeDelayTime = 250; 
 
//平板SUPERPAD 
 
timeOutID.push( setTimeout( function(){ 
 
//保证在刷屏动作之前删除viewPort 
 
head.removeChild(viewPort); 
 
//平板SAMSUNG GT-N8000 
 
timeOutID.push( setTimeout( function(){ location.replace(location.href); }, codeDelayTime) ); 
 
}, codeDelayTime) ); 
 
} 
 
} 
 
} 
 
/* 
 
* 功能: 检测pageWidth_cssPixels是否配置好 
 
* 参数: N/A 
 
***返回值[boolean]*** 
 
* 配置成功: true 
 
* 配置异常: false 
 
*/ 
 
var checkPageWidth = function(){ 
 
if( pageWidth_cssPixels === undefined || pageWidth_cssPixels === null ) { 
 
alert( "'pageWidth_cssPixels' 配置项未定义, 请定义后再试! " ); return false; 
 
}else if( typeof pageWidth_cssPixels != 'number' ){ 
 
alert( "'pageWidth_cssPixels' 配置项不是数字类型, 请重新配置后再试! " ); return false; 
 
}else if( isNaN(pageWidth_cssPixels) ){ 
 
alert( "'pageWidth_cssPixels' 配置项不能为NaN, 请重新配置后再试! " ); return false; 
 
}else if( pageWidth_cssPixels < 0 ){ 
 
alert( "'pageWidth_cssPixels' 配置项不能为负数, 请重新配置后再试! " ); return false; 
 
} 
 
return true; 
 
} 
 
//记录最近一次window.orientation 
 
var lastOrientation = 0; 
 
/* 
 
* 功能: 处理页面fit Size 
 
* 依赖: lastOrientation 全局变量 
 
* 参数: N/A 
 
***返回值[N/A]*** 
 
*/ 
 
var fitSize = function(){ 
 
if( !checkPageWidth() ) return; 
 
//是否第一次打开页面或刷新页面 
 
var isFirstIn = document.getElementsByName('viewport')[0] == undefined; 
 
//三星手机GT-S5830做优化 
 
if( window.orientation == lastOrientation && !isFirstIn ) return; 
 
lastOrientation = window.orientation; 
 
var body = document.getElementsByTagName('body')[0]; 
 
setViewPort( placeViewPort(), function(){ body.style.display = 'block'; } ); 
 
} 
 
/********************************** 
 
代码执行部分 
 
***********************************/ 
 
//页面设计稿宽度,单位CSS Pixels 
 
var pageWidth_cssPixels = 640; 
 
fitSize(); 
 
//持续被触发:三星手机GT-S5830 
 
window.addEventListener('orientationchange', function(){ fitSize(); }, false); 
 
/********************************** 
 
Future 
 
***********************************/ 
 
/* 
 
* 功能: 检测标签页是否正在被浏览[未来用于扩展] 
 
* 支持: 需支持页面可视性 (Page Visibility) API 
 
* Android 不支持,IOS 不支持, 
 
* Opera Mobile for Android 12.1支持 
 
* 参数: N/A 
 
***返回值[N/A]*** 
 
*/ 

本文来源 我爱IT技术网 http://www.52ij.com/jishu/12002.html 转载请保留链接。