javascript - 区分手持设备和台式机上的纵向模式

Question

我正在寻找一个可靠的媒体查询规则:

If desktop width < 720px AND devices in portrait mode {}

(也就是说，随着桌面宽度的减小，媒体查询开始于 720px。在手机上，这应该只发生在纵向模式下 - 横向不应该应用媒体查询)

---

问题是:如何将设备与桌面分开。

存在问题是因为:@media handheld 不受支持

另外 max-width 影响一切，所以它不能与 max-device-width AND portrait 一起使用。

---

似乎我只能定位其中一个:

1. 所有设备都低于/介于设定宽度之间
2. 仅设备(使用 JavaScript shim 修复媒体查询)低于/介于设置的宽度和方向之间。

不能分开处理设备和桌面。

是否有现有的 JavaScript 解决方案可以满足我的需求？

注意我正在用 LESS 编写我的 CSS，媒体查询嵌套在其中。

---

背景

我工作的网站是响应式的并且使用了网格系统。在 720 像素宽度(当前测试宽度)下，较小设备/分辨率的列使用发生变化。然而，经过测试，该站点(整个站点的宽度为 720 像素)在横向模式下可读性很好，即使在我的小屏幕 HTC Desire 上也是如此。由于我正在删除网站的某些部分以提高媒体查询的可用性，所以我想为什么不让该网站通常可以横向访问。

在不修改元素列跨度的情况下，桌面上的波纹管 720px 会看到一个非常 splinter 的网站。但是，由于移动设备的体积较小，因此看起来并非如此。然而，随着列跨度的修改，特定元素在手机横向时只是不成比例(例如标题)(由于浏览器的高度大大降低)。

简单地说，纯粹根据浏览器宽度更改设计并不能平等地跨所有设备，正如我在其他网站上设法实现的那样。

我正在使用以下元标记:

<meta  name="viewport"  content="width=device-width, 
    initial-scale=1, 
    maximum-scale=1, 
    user-scalable=no" />

---

尝试了什么

方向与桌面无关。它会根据用户窗口设置、分辨率等而变化。

我尝试了以下方法来定位手机/两者:

@media handheld and (orientation:portrait) { }

似乎没有手机利用 handheld 属性，至少 100% 没有 - 所以它毫无值(value)。

@media screen and (max-device-width:720px) and (orientation:portrait)  { }

会很好用，但是 android 2.2 和 2.3(可能是其他的，更不用说其他操作系统了？)有 max-device-width 不工作的问题。

@media screen and (max-width:720px) and (orientation:portrait)  { }

适用于高分辨率显示器(因为当您减小窗口宽度时高度会迅速变为 > 宽度)和手机，但不适用于较小的显示器，因为窗口在 720px 宽度时不会是纵向的(网站不断压缩超过我的限制)想要)。

@media screen and (max-width:720px), screen and (orientation:portrait)  { }

先到先得。没用。

@media screen and (max-width:720px), screen and (max-width:500px) and (orientation:portrait) { }

和

@media screen and (max-width:720px) { }
@media screen and (max-width:500px) and (orientation:portrait)  { }

一切都只是使用更大的 max-width。

我也对 min/max-height 进行了摆弄，但也没有成功。

Answer 1

我认为最好的方法是，根据 MDN(Mozilla 开发者网络)使用 window.innerHeight 文档 here和 window.innerWidth 文档 here它以像素为单位测量浏览器的宽度和高度以确定方向。

//Detect mobile platform

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if ( isMobile.any() ) {

    if (window.innerHeight > window.innerWidth) {
       console.log("Orientation is in portrait");
       }
    else {
       console.log("Orientation is in landscape");
         }
    }
else {
   console.log("Mobile platform not detected.");
};

此处有更多关于 mobile 的文档平台。