Javascript 检测平板电脑屏幕方向的最佳全球方法是什么

我正在寻找一个全球性的解决方案，它可以在平板电脑上检测方向（不仅仅是iPad或Android设备，而且越多越好）

一个解决方案：

  device.portrait = function() {
    return (window.innerHeight / window.innerWidth) > 1;
  };

  device.landscape = function() {
    return (window.innerHeight / window.innerWidth) < 1;
  };

device.grait=函数（）{
返回值（window.innerHeight/window.innerWidth）>1；
};
device.scape=函数（）{
返回值（window.innerHeight/window.innerWidth）<1；
};

我的观点是，上述做法效果不佳

我需要一个好的解决方案，在方向改变时，在纵向视图上的旋转木马中加载专用图像，在横向视图上加载专用图像

---

干杯

使用媒体查询进行查询

景观

@media screen and (min-width: 700px) and (orientation: landscape) { 
    /*css for a image*/ 
}

肖像画

@media screen and (min-width: 700px) and (orientation: portrait) { 
    /*css for different image*/
}

---

我不知道为什么您的代码运行不正常。
但我可以建议你用对我有用的

<span id="orientation">orientation</span>​

$(document).ready(checkOrientation);
$(window).resize(checkOrientation);

function checkOrientation() {
    var orientation = "Portrait";
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    if (screenWidth > screenHeight) {
        orientation = "Landscape";
    }
    $("#orientation").html(orientation);
}​

方向​
$（文档）.ready（检查方向）；
$（窗口）。调整大小（检查方向）；
函数checkOrientation（）{
var orientation=“纵向”；
var screenWidth=$（窗口）.width（）；
var screenHeight=$（window.height（）；
如果（屏幕宽度>屏幕高度）{
方向=“景观”；
}
$（“#方向”）.html（方向）；
}​

---

你可以看到

为什么该代码不适用于您？只是想澄清一下：我必须动态更改旋转木马中的图像，这样CSS就不会解决我的问题。我会很好地工作，CSS属性应用于元素，无论元素是动态出现的还是其他任何它不会造成伤害的内容。