使用JavaScript实现media queries检测

最近在做一个项目,项目中需要根据用户的设备来加载不同的样式,比如同一个页面,如果是PC访问,则显示PC版样式,手机访问则显示mobile样式。这个是一个不完全属于响应式的设计。QQ会员下面有大量的活动页面,不同的活动页面结构会随主题而改变,不像首页之类的频道页。为了使手机用户也能获得更好的体验,我们专门设计了一套移动模版样式。

开始的时候我们直接使用css media query加载样式:

总体还Ok,各个浏览器都能兼容。此时产品观察到了一个问题,在PC下如果缩小浏览器窗口,则会切换到mobile.css,由于mobile.css是一套固定风格的样式,突然变换了风格,用户感觉起来将会很怪。于是我们就想区分PC与手机设备。

media: min-width 指的是浏览器窗口宽度,等价于document.documentElement.clientWidth;min-device-width 是设备宽度,等价于window.screen.width。 我们想到使用min-device-width进行判断,很显然这个行不通,很多设备的device-width比PC分辨率还宽。

最后也没能找到使用CSS控制的办法,只能是让JS来检测了。

最简单的方法是使用window.matchMedia:

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {
	// window width is at least 500px
}
else {
	// window width is less than 500px
}

但可惜目前在移动设备上支持度还不够。

换一个思路,先通过检测UA来区分移动设备与PC:


移动设备UA正则:/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/,这个正则可以匹配90%的移动设备。

下一步就是实现类似css media 检测。思路大致是向页面中插入一端带media规则的css代码,设置某个元素的css属性,然后在通过脚本获取这个属性进行对比。

完整检测代码如下:

(function () {
	var UA           = window.navigator.userAgent,
		detectStyle  = '<style type="text/css">@media (max-width: 640px) {#MobileDetect {color: rgb(12, 34, 56)}}</style>',
		detectDiv    = '<div id="MobileDetect"></div>';

	if (/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/.test(UA)) {
		//判断device width是否小于640
		var style = createElement(detectStyle),
			div = createElement(detectDiv);
		document.head.appendChild(style);
		document.head.appendChild(div);

		//alert(getStyle(div, "color"))
		init(getStyle(div, "color") === 'rgb(12, 34, 56)');

		style.remove();
		div.remove();
	} else {
		init(false);
	}

	//初始化函数
	function init(flag) {
		if (!window.zDevice) window.zDevice = {};

		if (flag) {
			window.isMobile = true;
			window.zDevice.isSmallScreen = true;
		}
		//alert(window.isMobile);
	}

	//get element style
	function getStyle(oElm, strCssRule){
		var strValue = "";
		if(document.defaultView && document.defaultView.getComputedStyle){
			strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
		}
		else if(oElm.currentStyle){
			strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){
				return p1.toUpperCase();
			});
			strValue = oElm.currentStyle[strCssRule];
		}
		return strValue;
	}
	//createElement
	function createElement(string) {
	   var elem = document.createElement("div");
	   elem.innerHTML = string;
	   return elem.childNodes[0];
	}
})();

其中的detectStyle可以根据需要进行定义,或者抽出一个API,把需要检测的css属性做为变量。

案例展示:http://youxi.vip.qq.com/game/act/201304/nz.html

手机可以扫描二维码访问:

One comment on “使用JavaScript实现media queries检测

weiwei 进行回复 取消回复

电子邮件地址不会被公开。 必填项已用 * 标注

*