在平板电脑上检测屏幕方向的最佳全局方法是什么?

What is the best global way to detect screen orientation on tablets

本文关键字：全局 最佳 方法 是什么 方向 平板电脑 检测 屏幕      更新时间：2023-09-26

我正在寻找一个全球性的解决方案，将检测方向的平板电脑(不只是iPad或Android设备，但越多越好)。

一个解决方案:

  device.portrait = function() {
    return (window.innerHeight / window.innerWidth) > 1;
  };
  device.landscape = function() {
    return (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);
}​

你可以在这里看到demo !

相关文章：