Question

我想报告移动设备的屏幕尺寸并更新方向更改但是会遇到各种奇怪的错误，例如宽度几乎总是980px。

在调整大小但不能移动时，这在桌面上工作正常（报告横向或纵向很好）

尝试使用ipad，三星Galaxy标签，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
}

Answer 1

您将无法获得物理像素的宽度。相反，您将收到“CSS像素”。这就是你得到奇怪错误的原因。对于方向检测，您可以使用“CSS像素”，只需比较宽度和高度。

Answer 2

我不确定device.landscape()应该是什么，但device对象不存在，至少在标准浏览器中不存在。

各种奇怪的错误

在我的情况下，这是由于未定义的_addClass和_removeClass函数，_doc_element对象和上面提到的device.landscape()。

要修复device.landscape()，您可以将横向定义为宽度＆gt;的模式。高度。然后它只是一个简单的比较：

isLandscape = function() {
  return window.innerWidth > window.innerHeight;
}

这是example on jsfiddle，修复了所有错误。在iPhone 6上测试，它正在设置正确的类。

移动屏幕/视口大小检测 - Javascript

2 个答案: