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

我正在寻找可靠的媒体查询规则，即：

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

---

尝试了什么

在桌面上，方向是不相关的。它根据用户窗口设置、分辨率等而变化

我尝试了以下方法来瞄准手机/两者：

@media handheld and (orientation:portrait) { }

似乎没有手机利用了手持设备的属性，至少100%没有，所以它毫无价值

@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 (max-width:500px) and (orientation:portrait) { }

及

任何东西都只需使用较大的

最大宽度

---

我也曾尝试过

min/max height

，但也没有成功。

这三条规则适用于大多数移动设备

@仅介质屏幕和（最小宽度：768px）和（最大宽度：959px） @仅介质屏幕和（最小宽度：480px）和（最大宽度：767px） @仅介质屏幕和（最大宽度：479px）

---

或者尝试使用骨架响应框架

这是一个很好的javascript库。

您应该研究一下。它包括几乎所有有用的现代浏览器功能的功能检测/推断，特别是通过

modernizer.touch

上的简单布尔检查，包括设备是否基于触摸。这样，您就可以通过比较document.width和document.height来测试纵向/横向，例如：

if(Modernizr.touch) {
    // is touch device

    if(document.height > document.width) {
        // is in portrait
    } else {
        // is in landscape
    }
} else {
    // not touch device
}

---

请注意，正如您所发现的，没有完美的触摸/桌面测试，因此，如果您加入Modernizer触摸测试（或自行推出），最好参考此测试。

根据MDN（Mozilla开发者网络），我认为最好的方法是使用

window.innerHeight

文档和

window.innerWidth

文档测量浏览器的宽度和高度（以像素表示），以确定方向

//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.");
};

---

这里有更多关于平台的文档。

为了完整起见，本文将解释如何使用CSS选择器来限定嵌套LESS上下文中媒体查询的使用

@enginefree的回答和下面的评论解释了如何检查移动设备、移动设备的方向以及如何根据结果操作元素属性

下面的代码说明了如何使用LESS

&

和CSS3

：not

选择器在检测到我们要查找的属性或类时显示我们的媒体查询：

body {
    /* this has the possible class or data attribute of 'mobile' */
    /* this is not included in the nest as you can't climb at will */
    /* the class or attribute (via our JavaScript) could be applied
       to any element that sits above and outside of `#level-1` in 
       this example */

}


#level-1 { 

    #level-2 {

        #level-3 {

            #level-4 {

                body:not(.mobile) & {

                    /* produces the following CSS */
                    /* body:not(.mobile) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile class */

                    @media screen and (max-width:) {

                    }
                }

                body:not([data-device=mobile]) & {

                    /* produces the following CSS */
                    /* body:not([data-device="mobile"]) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile data-device attribute */

                    @media screen and (max-width:) {

                    }
                }

            }

        }

    }

}

如果

body

元素是这个嵌套的一部分，那么您将得到以下CSS，这应该解释为什么该元素必须存在于嵌套范围之外，以及嵌套之上：

body:not（.mobile）body#一级#二级#三级#四级{}

---

这只是一个先见之明。但所有现代手持设备都有html5标准。因此，如果设备不支持css3道具，那么它可能是一个桌面+1，虽然认为这是一个很好的起点，但最好使用Detect Mobile Browser JavaScript插件，它非常轻量级和强大。更多关于这方面的信息。干杯现在我该如何从这一点开始——能够使用JavaScript检测移动设备——到能够使用媒体查询和最大宽度在台式机上创建响应站点，并在检测到移动肖像时忽略此规则？为了增加难度，我使用更少的代码，媒体查询是嵌套的：D@Patrick：为了回答您的问题，我认为最简单的方法是让javascript在检测时向

body

标记添加一个类（比如

mobbort

），然后让您的媒体查询在css选择器字符串中使用

body:not（.mobPort）…[您的其他选择器]

限定它们所做的事情，这样当它检测到该类时，就不会应用媒体查询更改。@Patrick:除了ScottS注释，您可以看到这显示了如何根据条件设置选择

metatags

，并使用

LESS

调整该过程。好主意@ScottS，不过我需要研究旧的桌面浏览器兼容性。。。

if(Modernizr.touch) {
    // is touch device

    if(document.height > document.width) {
        // is in portrait
    } else {
        // is in landscape
    }
} else {
    // not touch device
}

//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.");
};

body {
    /* this has the possible class or data attribute of 'mobile' */
    /* this is not included in the nest as you can't climb at will */
    /* the class or attribute (via our JavaScript) could be applied
       to any element that sits above and outside of `#level-1` in 
       this example */

}


#level-1 { 

    #level-2 {

        #level-3 {

            #level-4 {

                body:not(.mobile) & {

                    /* produces the following CSS */
                    /* body:not(.mobile) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile class */

                    @media screen and (max-width:) {

                    }
                }

                body:not([data-device=mobile]) & {

                    /* produces the following CSS */
                    /* body:not([data-device="mobile"]) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile data-device attribute */

                    @media screen and (max-width:) {

                    }
                }

            }

        }

    }

}