html [仅CSS肖像] CSS仅在横向或纵向模式下可以查看网站。使用任何一种机制

Posted 2021-05-11

<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>

<style  media="screen and (orientation: landscape)">
</style>
<style  media="screen and (orientation: portrait)">
</style>

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">