在網站上不顯示風景模式

Question

我想讓我的網站的方式不允許在智能手機設備中的風景模式，因爲我的應用程序絕對不是爲「風景」模式設計的。我怎樣才能做到這一點 ？

有什麼建議嗎？謝謝

Answer 1

您無法控制用戶移動方向，但您至少可以發送消息。如果在縱向模式下，該示例將隱藏包裝並顯示警告消息，然後以橫向模式隱藏警告消息並顯示縱向。

<style type="text/css"> 
     #warning-message { display: none; } 
     @media only screen and (orientation:portrait){ 
      #wrapper { display:none; } 
      #warning-message { display:block; } 
     } 
     @media only screen and (orientation:landscape){ 
      #warning-message { display:none; } 
     } 
    </style> 

    .... 

<div id="wrapper"> 
    <!-- your html for your website --> 
</div> 
<div id="warning-message"> 
    this website is only viewable in landscape mode 
</div>