检测设备是否是水平状态

lmk123 commented 8 years ago

手头有一个需求，要求当手机从竖屏旋转到横屏的时候需要做些处理。设备旋转时可以使用 resize 或是 orientationchange 事件得到通知，但判断当前设备是否是水平状态就有一些麻烦了。

一开始我使用的是 window.innerWidth 与 window.innerHeight 来判断，但在 Android 手机里，当输入法弹出来的时候，会导致 window.innerHeight 变小并触发 resize 事件，此时 window.innerWidth 就会大于 window.innerHeight，但这并不是我想要的。

后来，我开始使用 window.outerWidth 与 window.outerHeight，但在 iOS 下，这两个属性的值始终是 0。

谷歌一番之后，看到有人说使用 window.matchMedia("(orientation: landscape)").matches 来判断，但从 MDN 的文档上得知这个方法会产生跟 innerWidth 与 innerHeight 同样的问题。

同样的，还可以判断 window.orientation，但这个属性已经被弃用了。

还有一个 window.screen.orientation 属性，但是还没有标准化，各家浏览器的实现都不一致，所以也没法用。

思来想去，最后只能尝试一挨个检测了：

let isLandspace

if ('orientation' in window) {
  isLandspace = function () {
    return window.orientation === 90 || window.orientation === -90
  }
} else if (window.outerHeight && window.outerWidth) {
  isLandspace = function () {
    return window.outerWidth > window.outerHeight
  }
} else {
  isLandspace = function () {
    return window.innerWidth > window.innerHeight
  }
}

ghost commented 8 years ago

问下，你有HTML5 canvas强制横屏的思路吗？要求是围绕canvas中心点旋转90"这样的。我是用CSS3的Media伪类实现的，不过transform-origin怎么写都不行，后来有人说用 transform-origin: 50vw 50vw; 我不明白v和w起什么作用。。。而且我还希望无论是横屏还是竖屏，宽高比都是3:2，较短的那个(宽或者高)要达到100%，另一个保持比例，屏幕其余部分留黑边。目前只知道用JavaScript 实现，而且代码稍多，有没有更好的方法？

lmk123 commented 8 years ago

@iVanilla 除了使用 js，我也想不到更好的办法 😂

ghost commented 8 years ago

@lmk123 那我还是继续用JS填坑好了

qiqiboy commented 7 years ago

2017-04-26 10 56 02

lmk123 / blog

检测设备是否是水平状态 #48