javascript - HTML5、Javascreen 显示图像(纵向/横向)

Question

我正在寻找一个脚本来检测屏幕是横向还是纵向，而无需旋转手机(如果需要，则为初始屏幕尺寸)，以便在游戏为横向游戏时显示图像以旋转设备(并且页面的初始加载是纵向的)。

我找到了很多有关“方向更改”事件的信息，但没有任何信息可以检测页面初始加载时的 View 。

Answer 1

你可以尝试一下

function isPortrait() {
  if (typeof (window.orientation) != 'undefined') {
    return (window.orientation === 0 || window.orientation === 180);
  }
  else {
    return (window.innerHeight > window.innerWidth);
  }
}

它测试是否支持 window.orientation 属性，如果不支持，则检查窗口高度是否大于窗口宽度。

编辑。window.orientation 优于宽度和高度测试，因为在移动设备上，当屏幕键盘弹出时，窗口高度会发生变化，从而给出错误的横向信息。

编辑。您也可以使用媒体查询，但无论您选择什么，如果您的目标浏览器不支持它，都一定要有后备方案。

http://caniuse.com/#search=matchmedia