css媒体查询只检测手机上的景观iPhone，Android [英] css media query to detect landscape only on mobile iPhone, Android

问题描述

我必须加入讯息才能防止使用者在横向模式中使用应用程式。

I have to add in a message to prevent users using an app in landscape mode.

屏幕上显示的信息看起来像这样。

The message which is an overlay on the screen look something like this.

<div id="landscape-rotate">
    <h3>Please rotate to portrait view</h3>
    <i class="fa fa-refresh fa-spin fa-3x"></i>
</div>

当iPhone或Android手机处于横向模式时，我想添加此消息。所以我添加了以下媒体查询。这是找到的答案之一这里 a>。

I wanted to add this message when the iPhone or Android phone is in landscape mode. So I have added the following media query. Which was one of the answers found here.

@media (max-device-width : 667px) and (orientation : landscape) { 

  #landscape-rotate {
    display: block;
    position:absolute;
  }
}

唯一的问题是这个媒体查询似乎也选择当用户在键盘出现时以纵向模式键入时显示。有人发现了媒体查询以避免此问题，因为它使这种方法不可用，所以我需要使用JavaScript。

The only problem is this media query seems to also pick up when the user is typing in portrait mode when the keyboard comes up. Has anyone found a media query to avoid this issue, as it makes this approach unusable so I will need to use JavaScript instead.

推荐答案

$(window).resize(function() {
  if ($(window).width() < 750) {
  if(screen.availHeight < screen.availWidth){
    $('#landscape-rotate').show();
  } 
  if(screen.availHeight > screen.availWidth) {
    $('#landscape-rotate').hide();
  }
}
});

这篇关于css媒体查询只检测手机上的景观iPhone，Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！