Page Orientation
According to Wikipedia, Page orientation is the way in which a rectangular page is oriented for normal viewing. The two most common types of orientation are portrait and landscape. The term “portrait orientation” comes from visual art terminology and describes the dimensions used to capture a person’s face and upper body in a picture; in such images, the height of the display area is greater than the width. The term “landscape orientation” also reflects visual art terminology, where pictures with more width than height are needed to fully capture the horizon within an artist’s view.
<style>
.orientation-message{
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
z-index: 9999;
width: 100%;
display:none;
height: 100%;
position: fixed;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
text-decoration:underline;
}
</style>
<div class="orientation-message">
<span class="message">
Please Use Portrait View
</span>
</div>
{{ WEBPAGE HTML/CSS/JavaScript Codes }}
<script>
function orientationAdjust(){
if( /Android|webOS|Mobile Safari|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if(window.innerHeight > window.innerWidth){
document.getElementsByClassName('orientation-message')[0].style.display = 'none';
}
if(window.innerWidth > window.innerHeight){
document.getElementsByClassName('orientation-message')[0].style.display = 'flex';
}
}
}
orientationAdjust();
window.onresize = function(event) {
orientationAdjust();
};
</script>
