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(); }
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); } }
02
THE HTML <div id="turn">Rotate device!</div> <div id="container">Contents.</div>
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; } }