现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面。这个时候可以借助device.js来检测设备,然后打开不同的页面(device.js 是一个可以用来检测设备,操作系统和方向的js库)。当然这种做法需要一次跳转。
假设有个m.html想用于mobile端展示,pc.html想用于pc端展示。这个时候可以用index.html作为入口,在<head>内引入device.js来检测设备,然后用js来实现跳转。
当设备为Mobile和tablet的时候展示m.html
否则展示pc.html
实现代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>responsive demo</title>
<script src="device.js"></script>
</head>
<body style="margin: auto; position: absolute; width:100%; height: 100%">
<script>
var isMobile = device.mobile(),
isTable = device.tablet();
if(isMobile || isTable){
window.open("m.html","_self");
}
else{
window.open("pc.html","_self");
}
</script>
</body>
</html>
其中device.js代码如下
(function() {
var previousDevice, _addClass, _doc_element, _find, _handleOrientation, _hasClass, _orientation_event, _removeClass, _supports_orientation, _user_agent;
previousDevice = window.device;
window.device = {};
_doc_element = window.document.documentElement;
_user_agent = window.navigator.userAgent.toLowerCase();
device.ios = function() {
return device.iphone() || device.ipod() || device.ipad();
};
device.iphone = function() {
return _find('iphone');
};
device.ipod = function() {
return _find('ipod');
};
device.ipad = function() {
return _find('ipad');
};
device.android = function() {
return _find('android');
};
device.androidPhone = function() {
return device.android() && _find('mobile');
};
device.androidTablet = function() {
return device.android() && !_find('mobile');
};
device.blackberry = function() {
return _find('blackberry') || _find('bb10') || _find('rim');
};
device.blackberryPhone = function() {
return device.blackberry() && !_find('tablet');
};
device.blackberryTablet = function() {
return device.blackberry() && _find('tablet');
};
device.windows = function() {
return _find('windows');
};
device