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

Mobile screen/viewport size detection - Javascript

本文关键字：检测 Javascript 屏幕 视口 移动      更新时间：2023-09-26

我想报告移动设备的屏幕尺寸并更新方向变化，但遇到各种奇怪的错误，例如宽度几乎总是 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上测试，它设置了正确的类别。

相关文章：