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

Question

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

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

(也就是说,当桌面上的宽度减小时,媒体查询会以720px开始.在手机上,这应该只在纵向模式下才会发生 - 横向不应该应用媒体查询)

---

问题是:如何将设备与桌面分开定位.

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

另外max-width影响一切,所以它不能与之结合使用max-device-width AND portrait

---

好像我只能针对:

1. 所有设备在设定宽度之间/之间
2. 只有设备(使用JavaScript填充程序修复媒体查询)低于/设置宽度和方向之间.

无法单独处理设备和台式机.

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

注意我正在编写我的CSS,LESS,媒体查询嵌套在其中.

---

背景

我正在处理的网站是响应式的,并使用网格系统.在720px宽度(当前测试宽度)下,列使用会针对较小的设备/分辨率进行更改.经测试,不过,该网站(在720像素宽度的整个网站)是景观惊喜可读性,甚至在我的小屏幕的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)  { }

在高分辨率显示器上工作(因为当你减小窗户的宽度时高度很快会变宽>宽度)和手机,但不能在较小的显示器上工作,因为窗口不会是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的文件在这里和window.innerWidth文档在这里它测量浏览器的宽度和高度pixals来确定方向.

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

有关移动平台的更多文档.

Answer 2

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

@media only 屏幕和 (min-width: 768px) 和 (max-width: 959px) @media only 屏幕和 (min-width: 480px) 和 (max-width: 767px) @media only 屏幕和 (max-width: 479 像素）

或者尝试使用 Skeleton Responsive 框架