Disable Landscape View in Mobile View Using JavaScript and CSS

1 min read


Page Orientation

According to Wikipedia, Page orientation is the way in which a rectangular page is oriented for normal viewing. The two most common types of orientation are portrait and landscape. The term “portrait orientation” comes from visual art terminology and describes the dimensions used to capture a person’s face and upper body in a picture; in such images, the height of the display area is greater than the width. The term “landscape orientation” also reflects visual art terminology, where pictures with more width than height are needed to fully capture the horizon within an artist’s view.


    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;

<div class="orientation-message">
  <span class="message">
  Please Use Portrait View

{{ WEBPAGE HTML/CSS/JavaScript Codes }}

  function orientationAdjust(){
    if( /Android|webOS|Mobile Safari|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      if(window.innerHeight > window.innerWidth){
        document.getElementsByClassName('orientation-message')[0].style.display = 'none';
      if(window.innerWidth > window.innerHeight){
        document.getElementsByClassName('orientation-message')[0].style.display = 'flex';

  window.onresize = function(event) {


Recommended For You

About the Author: Ritesh Ghimire