css媒体查询检测景观只在移动iPhone上，Android

我必须添加一条消息，以防止用户在横向模式下使用应用程序。css媒体查询检测景观只在移动iPhone上，Android

屏幕上的覆盖消息看起来像这样。

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

我想在iPhone或Android手机处于横向模式时添加此消息。所以我添加了下面的媒体查询。哪一个答案是here。

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

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

唯一的问题是这个媒体查询似乎还搭载了当用户在纵向模式打字时键盘的出现。有没有人发现媒体查询以避免此问题，因为它使这种方法无法使用，所以我需要使用JavaScript代替。

来源

2015-10-26 steven iseki

有[这里]看看（http://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut）它有几个解决您的问题 – paulitto

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

来源

2016-08-13 16:44:30

css媒体查询检测景观只在移动iPhone上，Android

回答

相关问题