手机viewport:如何获取设备的横向分辨率

我测试了很多测试机，其中包括三星手机 GALASY S1，三星手机 GALASY S2，三星手机 GT-S5830，索尼手机 LT26i，三星平板 GT-P7320，三星平板 GT-N8000，Nexus 7，HTC T8788b，iPod NG-IT-6409，中兴手机 ZTE-T U880，平板 SUPERTAB。

我按CSS Object Model View中涉及到的大部分属性分别在测试机中测出对应的读数，挖掘哪些属性读数与设备分辨率相吻合。

需要screen.width获取

Nexus7 横屏时无一个属性能正确获取纵向分辨率

HTC T8788b 横屏时需要screen.height才能正确获取纵向分辨率

需要window.outerWidth获取

三星手机 GT-S5830

中兴手机 ZTE-T U880

平板 SUPERTAB

既可以使用screen.width也可以使用window.outerWidth获取

三星手机 GALASY S1

三星手机 GALASY S2

索尼手机 LT26i

三星平板 GT-P7320

三星平板 GT-N8000

iPod NG-IT-6409

由于横屏要对Nexus7和HTC T8788b做单独处理，首先要判断设备是否处于横屏状态，而这个状态我们一般检测window.orientation这个特性，一般来说，横屏的时候它会返回90，或者-90，当竖屏时，它会返回0，或者180，值类型为number，但在三星平板中，判断的依据刚好相反的，横屏时返回0，竖屏时返回90，或者-90，因此三星平板做单独处理，我们发现三星平板有一个区别其他Android设备的特性，就是window.devicePixelRatio，其值为1，但这一判断是有局限性的，第一是兼容的设备只针对上面列出来的测试机型，第二是假设这些测试机型使用的浏览器都系原生的，经过测试发现三星手机 GALASY S2，索尼手机 LT26i 在UC浏览器中显示也为1。

跨设备获取是否横屏状态的代码：(此处跨设备只是针对上面列出的测试机型，以后出现“跨设备”都系这个意思)

var landscape_map = { "90": true, "-90": true } 
 
,portrait_map = { "0": true, "180": true } 
 
,orientation = window.orientation 
 
,ua = navigator.userAgent 
 
,isAndroid = !(ua.match(/iPhone/i) || ua.match(/iPod/i) || ua.match(/iPad/i)); 
 
var getIsLandscape = function(){ 
 
var isLandscape = false; 
 
//三星平板 
 
if(window.devicePixelRatio == 1 && isAndroid){ 
 
portrait_map[orientation] && (isLandscape = true); 
 
}else{ 
 
landscape_map[orientation] && (isLandscape = true); 
 
} 
 
return isLandscape; 
 
}; 

在竖屏下，我们发现了需要window.outerWidth获取的那些设备使用的都是较老的Android版本，版本都低于3。因此我们的策略是判断设备的Android系统的版本号，并返回一个数值，如果是非Android系统返回NaN，如果返回值低于3我们就使用window.outerWidth，否则就使用screen.width。值得注意的是HTC T8788b使用的是Windows Phone 7系统的，由于判断其Android版本号会返回NaN，NaN<3 返回false的，所以依然为使用screen.width。

竖屏跨设备获取分辨率的代码：

var getAndroidVersion = function(){ 
 
var ua = navigator.userAgent; 
 
if(ua.toLowerCase().indexOf("android") == -1) return parseInt(''); 
 
var versionIdx = ua.toLowerCase().indexOf("android") + 8 
 
,version = parseInt(ua.toLowerCase().substring(versionIdx,++versionIdx),10); 
 
return version; 
 
}; 
 
var getPortraitResolution = function(){ 
 
var androidVersion = getAndroidVersion() 
 
isPortrait= !getIsLandscape(); 
 
if(isPortrait){ 
 
return androidVersion < 3 ? window.outerWidth : screen.width; 
 
}else{ return undefined; } 
 
} 

解决了是否横屏的函数我们就要对Nexus7和HTC T8788b分别单独处理，Nexus7在所有测试机中有一个唯一特性，没有其他测试机型与其值一样的，这个属性就是window.devicePixelRatio，其值为1.3312499523162842，而HTC T8788b也有一个唯一特性，这个属性同样是window.devicePixelRatio，只是其值为undefined。

于是横屏跨设备获取分辨率的代码：

var landscape_map = { "90": true, "-90": true } 
 
,portrait_map = { "0": true, "180": true } 
 
,orientation = window.orientation 
 
,isLandscape = getIsLandscape(); 
 
var getLandscapeResolution = function(){ 
 
var landscapeResolution = 0 
 
,androidVersion = getAndroidVersion() 
 
,isNexus7 = window.devicePixelRatio == 1.3312499523162842 
 
,isHTC_T8788b = window.devicePixelRatio == undefined; 
 
if(isLandscape){ 
 
if(androidVersion < 3){landscapeResolution = window.outerWidth;} 
 
else{ 
 
if(isHTC_T8788b ){landscapeResolution = screen.height;} 
 
else if(isNexus7){landscapeResolution = 1280;}//无法获取正确值，故无耐采用硬编码 
 
else{landscapeResolution = screen.width;} 
 
} 
 
}else{ return undefined; } 
 
} 

最后整合一个跨设备横竖屏获取分辨率的代码：

var landscape_map = { "90": true, "-90": true } 
 
,portrait_map = { "0": true, "180": true } 
 
,orientation = window.orientation 
 
,isLandscape = getIsLandscape(); 
 
var getResolution = function(){ 
 
var landscapeResolution = 0 
 
,androidVersion = getAndroidVersion() 
 
,isNexus7 = window.devicePixelRatio == 1.3312499523162842 
 
,isHTC_T8788b = window.devicePixelRatio == undefined; 
 
if(androidVersion < 3){ 
 
landscapeResolution = window.outerWidth; 
 
}else{ 
 
if(isLandscape){ 
 
if(isHTC_T8788b ){landscapeResolution = screen.height;} 
 
elseif(isNexus7){landscapeResolution = 1280;}//无法获取正确值，故无耐采用硬编码 
 
else{landscapeResolution = screen.width;} 
 
}else{ 
 
landscapeResolution = screen.width; 
 
} 
 
} 
 
} 

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