Question

我想创建一个只出现在手机上的弹出通知。我希望该消息提示观众水平翻转他们的设备，当他们这样做时，我希望消息消失。我的代码是什么？

Answer 1

您可以使用CSS查询在纵向模式下专门定位装置，如下所示：

   <div id="pop-up">Turn your device horizontally</div>

     /* Hides pop up when landscape */
     @media only screen 
     and (min-device-width : 375px) 
     and (max-device-width : 667px) 
     and (orientation : landscape) { 
       #pop-up {
       display: none;
       }
     }

     /* Shows pop up when portrait */
     @media only screen 
     and (min-device-width : 375px) 
     and (max-device-width : 667px) 
     and (orientation : portrait) {
       #pop-up {
       display: unset
       }
     }

编辑：这个jsfiddle是一个工作示例http://jsfiddle.net/jarrodwhitley/gj0dx3zy/

Answer 2

您只需要在每个媒体查询的特定宽度+横向上显示它，例如

@media only screen and (max-width: 769px) and (orientation: landscape) {
  .notification {
    display: block;
  }
}

这里有一个完整的例子：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <style media="screen">
    body {
      background-color: #666;
    }

    .notification {
      display: none;
      position: absolute;
      top: 10%;
      right: 10%;
      left: 10%;
      bottom: 10%;
      background: white;
      box-shadow: 5px 5px;
    }

    @media only screen and (max-width: 769px) and (orientation: landscape) {
      .notification {
        display: block;
      }
    }
  </style>
</head>

<body>
  <div class="notification">
    Please flip your Phone!
  </div>
</body>

</html>

如何在屏幕垂直翻转时只显示在移动设备上的弹出文本框，并在水平翻转时消失？

2 个答案: