css媒體查詢檢測景觀只在移動iPhone上，Android

Question

我必須添加一條消息，以防止用戶在橫向模式下使用應用程序。

屏幕上的覆蓋消息看起來像這樣。

<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代替。

Answer 1

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