我想报告移动设备的屏幕尺寸并更新方向变化,但遇到各种奇怪的错误,例如宽度几乎总是 980px。
调整大小时,这在桌面上工作正常,但不能在移动设备上工作(不过报告横向或纵向很好)
在ipad,三星Galaxy Tab,Google Nexus手机和iPhone 4上试用
这是我正在使用的:
// get dimensions
_getScreenWidth = function() {
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var el = document.getElementById('dimensions');
_handleOrientation();
el.innerHTML = 'Width: '+screenWidth +' :: Height: '+screenHeight + "<br /><br />" + _doc_element.className;
};
// portait or landscape
_handleOrientation = function() {
if (device.landscape()) {
_removeClass("portrait");
return _addClass("landscape");
} else {
_removeClass("landscape");
return _addClass("portrait");
}
};
// resize event
var resizeTimeout;
window.onresize = function() {
clearTimeout(resizeTimeout);
// handle normal resize
resizeTimeout = setTimeout(function() {
_getScreenWidth();
}, 250); // 250ms delay
}
您不会获得以物理像素为单位的宽度。相反,您将收到"CSS 像素"。这就是为什么你会遇到奇怪的错误。对于方向检测,您可以使用"CSS像素",只需比较宽度与高度即可。
我不确定device.landscape()
应该是什么,但device
对象不存在,至少在标准浏览器中不存在。
各种奇怪的错误
就我而言,这是由于未定义的_addClass
和_removeClass
函数,_doc_element
对象,如上所述,device.landscape()
.
要修复device.landscape()
,您可以将横向定义为宽度>高度的模式。那么这只是一个简单的比较:
isLandscape = function() {
return window.innerWidth > window.innerHeight;
}
这是jsfiddle上的示例,修复了所有错误。在iPhone 6上测试,它设置了正确的类别。