force landscape mode css

1// ID/class based landscape mode on/off
2
3#container { display:block; }
4@media only screen and (orientation:portrait){
5  #container {  
6    height: 100vw;
7    -webkit-transform: rotate(90deg);
8    -moz-transform: rotate(90deg);
9    -o-transform: rotate(90deg);
10    -ms-transform: rotate(90deg);
11    transform: rotate(90deg);
12  }
13}
14@media only screen and (orientation:landscape){
15  #container {  
16     -webkit-transform: rotate(0deg);
17     -moz-transform: rotate(0deg);
18     -o-transform: rotate(0deg);
19     -ms-transform: rotate(0deg);
20     transform: rotate(0deg);
21  }
22}

1<style type="text/css">
2    #warning-message{ 
3      display: none; 
4	}
5    @media only screen and (orientation:portrait){
6        #wrapper { 
7          display:none; 
8      	}
9        #warning-message { 
10          display:block; 
11      	}
12    }
13    @media only screen and (orientation:landscape){
14        #warning-message{
15          display:none; 
16      }
17    }
18</style>
19
20....
21
22<div id="wrapper">
23    <!-- your html for your website -->
24</div>
25<div id="warning-message">
26    this website is only viewable in landscape mode
27</div>