Question

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

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

（也就是说，当桌面上的宽度减小时，媒体查询将以720px开始播放。在手机上，这应该仅在处于纵向模式时发生 - 景观不应该应用媒体查询）

问题是：如何将设备与桌面分开定位。

存在问题，原因是：@media handheld不受支持

此外max-width影响所有内容，因此无法与max-device-width AND portrait

一起使用

似乎我只能针对：

所有设备低于/设定宽度
只有设备（使用JavaScript垫片修复媒体查询）低于/设置宽度和方向之间。

不能单独处理设备和桌面。

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

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

背景

我正在处理的网站是响应式并使用网格系统。在720px宽度（当前测试宽度）下，列使用会针对较小的设备/分辨率进行更改。然而，经过测试，该网站（宽度为720px的完整网站）在景观中的可读性令人愉悦，甚至在我的小屏幕HTC Desire上也是如此。当我删除部分网站以便通过媒体查询获得更好的可用性时，我想为什么不能在横向上正常访问该网站。

在没有修改元素列跨度的桌面上的波纹720px看到一个非常破碎的网站。但是，由于移动设备的性质较小，因此不会出现这种情况。然而，对于列跨度修改，当涉及到手机上的风景时（由于浏览器的高度大大降低），特定元素仅仅是不成比例的（例如标题）。

简而言之，完全根据浏览器宽度更改设计并不能平等地传播所有设备，因为我已设法在其他网站上实现。

我使用以下元标记：

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

已尝试的内容

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

我尝试了以下内容来定位手机/两者：

@media handheld and (orientation:portrait) { }

似乎没有手机利用handheld属性，至少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)  { }

适用于高分辨率显示器（因为当你减小窗户的宽度时，高度会很快变为＆gt;宽度）和手机，但不会在较小的显示器上工作，因为窗口不会是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个平台的更多文档。

Answer 2

这三条规则涵盖了大多数移动设备

@media only screen and（min-width：768px）and（max-width：959px） @media only screen和（min-width：480px）和（max-width：767px） @media only screen and（max-width：479px）

或者尝试使用Skeleton Responsive框架

Answer 3

你应该研究Modernizr。它包括几乎所有有用的现代浏览器功能的功能检测/推断，尤其包括通过Modernizr.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
}

请注意，正如您所发现的，触摸/桌面没有完美的测试，所以如果您使用Modernizr触摸测试（或自己动手），最好咨询一下page that explains which touch tests are reliable, when。

Answer 4

为了完整起见，这是为了解释如何使用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，这可以解释为什么该元素必须存在于嵌套范围之外以及它之上：< / p>

body:not(.mobile) body #level-1 #level-2 #level-3 #level-4 { }

区分手持设备和桌面上的纵向模式

5 个答案: