javascript - Android中的媒体匹配？（Phonegap 方向）

Question

我在Phonegap中改变了方向。我的计划是在方向改变时更改 CSS 文件（无论如何，这可能是一种复杂的方式），但我正在努力让任何依赖于方向的事件发生。我目前正在使用代码：

window.onorientationchange = function() {

  navigator.notification.alert(
        'orientation change!',  // message
        'Portrait',            // title
        'buttton');              // buttonName

  if (window.matchMedia("(orientation: portrait)").matches){
      navigator.notification.alert(
        'now in portrait',  // message
        'Portrait',            // title
        'buttton');              // buttonName
  }
  else{
    alert("landscape")
  }
}

第一个警报（每当方向改变时）很好，但第二个警报（当它特别变成横向时）没有发生。我在 Android 版本 2.3.5 上。（这种方法是 Razvan 在这个问题上提出的）

Answer 1

您需要在 MediaQueryList 对象上设置一个侦听器。例如，请参见下文。

除了媒体查询之外，还有其他方法可以检索设备方向更改。搜索“mdnorientationchange”以获取示例。

1. 创建 MediaQueryList 对象，“方向”。包含 add/removeListener、媒体和匹配项。
2. 创建侦听器“orientationListener”。测试媒体查询匹配。
3. 获取初始方向值

4. 聆听发生的任何变化

   var orientation = window.matchMedia("(orientation: portrait)"),
       orientationListener = function(mql) {
   
           if (mql.matches) {
               // Media query does match orientation portrait
           } else {
               // Media query does not match which should mean orientation is now landscape
           }
   
       };
   
   // Gets initial match
   
   orientationListener(orientation);
   
   // Listens for change
   
   orientation.addListener(orientationListener);