Orientation only to landscape in mobile

ayush-raj13 · Jul 10, 2023 · b637faa · b637faa
1 parent 5065bba
commit b637faa
Showing 1 changed file with 44 additions and 1 deletion.
diff --git a/client/public/index.html b/client/public/index.html
@@ -5,8 +5,51 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <style type="text/css">
+    #landscape{
+             position: absolute;
+             top: 0px;
+             left: 0px;
+             background: #000000;
+             width: 100%;
+             height: 100%;
+             display: none; 
+             z-index: 20000;
+             opacity: 0.9;
+             margin:0 auto;
+    }
+    #landscape div{
+
+            color: #FFFFFF;                                  
+            opacity: 1;
+            top: 50%;
+            position: absolute;
+            text-align: center;
+            display: inline-block;
+            width: 100%;
+    }
+    </style>
+    <script>          
+          function doOnOrientationChange()
+          {
+            switch(screen.orientation.type) 
+            {  
+              case 'portrait-primary':                 
+                     document.getElementById("landscape").style.display="block";
+                     break;
+             default:                   
+                    document.getElementById("landscape").style.display="none";
+                    break;                            
+            }
+          }
+
+          //Listen to orientation change
+          window.addEventListener('orientationchange', doOnOrientationChange);  
+
+        </script>
 </head>
-<body>
+<body onload="doOnOrientationChange();">
+  <div id="landscape"><div>"Rotate Device to Landscape"</div></div>
   <div id="root"></div>
   <div class="modal-container"></div>
 </body>