Question

我正在寻找能够检测平板电脑方向的全球解决方案（不仅仅是iPad或Android设备，但越多越好）。

一个解决方案：

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

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

我的观点是上述情况不太好。

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

干杯。

Answer 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*/
}

Answer 2

我不知道为什么你的代码效果不好但我建议你使用this code，这对我有用，

<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 here！

在平板电脑上检测屏幕方向的最佳全球方式是什么？

2 个答案: