JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="changeMe">Hello World</div>
</body>
CSS
.portrait {
display: block !important;
}
.landscape {
display: inline !important;
}
#changeMe {
color: blue;
}
JavaScript
$(document).ready(function() {
$('body').on('orientationchange', function() {
console.log('updated orientation: ' + window.orientation);
if (window.orientation == 0) {
// portrait mode
$('#changeMe').removeClass('landscape').addClass('portrait').text('Portrait Mode');
} else {
// landscape mode
$('#changeMe').removeClass('portrait').addClass('landscape').text('Landscape Mode');
}
});
});