16

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

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

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

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

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

附加max-width影响一切，因此不能与max-device-width AND portrait

似乎我只能定位：

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

不能单独对待设备和桌面。

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

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

背景

我正在处理的网站是响应式的并使用网格系统。在 720px 宽度（当前测试宽度）下，较小设备/分辨率的列使用会发生变化。然而，经过测试，该站点（720px 宽度的完整站点）在横向上可读性很好，即使在我的小屏幕 HTC Desire 上也是如此。当我删除网站的某些部分以便更好地使用媒体查询时，我想为什么不让该网站通常可以横向访问。

Bellow 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)  { }

适用于高分辨率显示器（因为随着窗口宽度的减小，高度迅速变为 > 宽度）和手机，但不适用于较小的显示器，因为窗口不会在 720 像素宽度时为纵向（站点不断压缩超过我想要的限制）。

@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没有成功的小提琴。

4

5 回答 5

5

我认为最好的方法是，根据 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.");
};

更多关于移动平台的文档。

于 2012-12-12T01:55:36.627 回答
1

你应该看看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 触摸测试（或自己动手），最好查阅此页面，其中解释了哪些触摸测试是可靠的，当.

于 2012-12-12T01:41:38.440 回答
1

为了完整起见，这是解释如何使用 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 #level-1 #level-2 #level-3 #level-4 { }

阅读有关&运营商的更多信息

于 2012-12-18T18:54:10.947 回答
1

那么这三个规则涵盖了大多数移动设备

@media only screen and (min-width: 768px) and (max-width: 959px) @media only screen and (min-width: 480px) and (max-width: 767px) @media only screen and (max-width: 479 像素）

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

于 2012-11-17T15:10:51.973 回答
0

一个很棒的 JavaScript 库是css3-mediaqueries-js。

于 2012-12-11T11:38:16.630 回答