css 景观轮换通知

Posted 2021-05-13

  $(window).bind('orientationchange', function(e) {
    switch ( window.orientation ) {
      case 0:
      $('.turnDeviceNotification').css('display', 'none');
      $('.mobile-menu').css('display' , 'block');
      // The device is in portrait mode now
      break;

      case 180:
      $('.turnDeviceNotification').css('display', 'none');
      $('.mobile-menu').css('display' , 'block');
      // The device is in portrait mode now
      break;

      case 90:
      // The device is in landscape now
      $('.turnDeviceNotification').css('display', 'block');
      $('.mobile-menu').css('display' , 'none');
      break;

      case -90:
      // The device is in landscape now
      $('.turnDeviceNotification').css('display', 'block');
      $('.mobile-menu').css('display' , 'none');
      break;
    }
  });

  <div class="turnDeviceNotification">
    <img src="<?php bloginfo('template_directory')?>/imgs/footer-logo.png" title="<?php bloginfo('description') ?>" class="center margin-bottom-mb">
    <h1>Welcome to BlackBee</h1>
    <p>For optimal viewing experience please rotate your device</p>
  </div>

.turnDeviceNotification {
  background-color: #0c223f;
  padding: 50px 0 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
}

.turnDeviceNotification h1 {
  color: #ff5000;
  text-align: center;
  padding: 0 0 10px;
  margin: 0;
}

.turnDeviceNotification p {
  color: #fff;
  text-align: center;
}