how to lock the viewport css code example

Example 1: how to lock device orientation using css and javascript

@media only screen and (orientation:portrait){
  body {
    height: 100vw;
    transform: rotate(90deg);
  }
}

Example 2: force landscape mode css

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