I've searched this question on StackOverflow but none of the answers works. I simply want to lock screen orientation to vertical (portrait) when user opens my website on mobile phone (I dedicate my website to mobile phones only).
I tried these solutions but none of them works. In html file I have:
<body onload="lockOrientation()">
In js file I tried these solutions, but none of them works:
function lockOrientation() {
// GO INTO FULL SCREEN FIRST
let de = document.documentElement; //returns html element
if (de.requestFullscreen) { de.requestFullscreen(); }
else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); }
else if (de.webkitRequestFullscreen) { de.webkitRequestFullscreen(); }
else if (de.msRequestFullscreen) { de.msRequestFullscreen(); }
screen.orientation.lock("portrait-primary");
}
function lockOrientation() {
if(document.querySelector("body").requestFullscreen) {
document.querySelector("body").requestFullscreen();
}
else if(document.querySelector("body").webkitRequestFullScreen) {
document.querySelector("body").webkitRequestFullScreen();
}
else if(document.querySelector("body").mozRequestFullScreen) {
document.querySelector("body").mozRequestFullScreen();
}
else if(document.querySelector("body").msRequestFullscreen) {
document.querySelector("body").msRequestFullscreen();
}
screen.orientation.lock("portrait-primary");
}