Как я могу кодировать всплывающее текстовое поле, которое появляется на мобильных устройствах только тогда, когда экран перевернут по вертикали и исчезнет, ​​когда перевернуто по горизонтали? - PullRequest
Новая
       13

Как я могу кодировать всплывающее текстовое поле, которое появляется на мобильных устройствах только тогда, когда экран перевернут по вертикали и исчезнет, ​​когда перевернуто по горизонтали?

0 голосов
/ 08 июня 2018

Я хочу создать всплывающее уведомление, которое появляется только на мобильном телефоне.Я хочу, чтобы сообщение подсказывало зрителям перевернуть свое устройство по горизонтали, и когда они это сделают, я бы хотел, чтобы сообщение исчезло.Каким будет мой код для этого?

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Вам просто нужно показать его на определенной ширине + на ландшафте для медиа-запроса, например 

@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>
0 голосов
/ 08 июня 2018

Вы можете настроить таргетинг на устройства в портретном режиме с помощью запросов 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...