Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript X-Browser reload on orientation change using MatchMedia
// RELOAD ON ORIENTAtiON CHANGE:
var mqp = window.matchMedia("(orientation: portrait)");
// Detect initial orientation
var is_portrait = mqp.matches;
var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
// Add a media query change listener
mqp.addListener(function(m) {
// Check if orientation changed:
if(m.matches) {
// Changed to portrait
if (!is_portrait && !isFullscreen) {
// Was landscape before and is not fullscreen
// => Reload
window.location.reload();
}
is_portrait = true;
} else {
// Changed to landscape!
if (is_portrait && !isFullscreen) {
// Was portrait before and is not fullscreen
// => Reload
window.location.reload();
}
is_portrait = false;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment