CSS JS

HOW TO LOCK SCREEN ORIENTATION

(quick & simple examples)

MUST BE IN FULL SCREEN FIRST  let de = document.documentElement;  if (de.requestFullscreen)   { de.requestFullscreen(); }  else if (de.mozRequestFullScreen)   { de.mozRequestFullScreen(); }  else if (de.webkitRequestFullscreen)   { de.webkitRequestFullscreen(); } else if (de.msRequestFullscreen)   { de.msRequestFullscreen(); }

ORIENTATION LOCK API

01

THEN LOCK ORIENTATION screen.orientation.lock("portrait");

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

CSS FORCE ROTATE

02

THE HTML <div id="turn">Rotate device!</div> <div id="container">Contents.</div>

ROTATE MESSAGE

03

SHOW CONTENT ON RIGHT ORIENTATION @media only screen and (orientation:portrait) {   #turn { display:none; }   #container { display:block; } }

WRONG ORIENTATION "ERROR" MESSAGE @media only screen and (orientation:landscape) {   #turn { display:block; }   #container { display:none; } }