CSS JS

WAYS TO LOCK SCREEN ORIENTATION IN CSS JS

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(); }

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

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

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