CSS媒体查询问题

Question

我有一个我以前没有媒体查询的问题。我的问题主要出在Chrome和Opera的移动设备上，但在Safari和Firefox中没有。

对于屏幕超过769像素并且默认设置为display的设备，我有一个none属性设置为inline-block的按钮。但对于屏幕小于769px的设备，大多数浏览器不会将属性更改为inline-block。这是一个伪代码：

CSS：

.btn_play {
 display: inline-block;
 width:21.875%;
 border-radius:50%;
 background: #F7F7F7;
 font-size: 0;
 font-weight: normal;
 text-align:center;
 color: inherit;
 vertical-align: middle;
 position: relative;
 z-index: 22;
}

@media (min-width: 320px) and (orientation: landscape) {
  .btn_play {
    display: inline-block;
  }
  .btn_play_desktop {
    display: none;
  }
}

@media (min-width: 769px) and (orientation: landscape){
  .btn_play {
    display: none;
  }
  .btn_play_desktop {
    display: inline-block;
  }
}