Skip to content

Instantly share code, notes, and snippets.

@benald
Created September 19, 2019 02:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benald/f077416df19c1a5d35883cc7a0988093 to your computer and use it in GitHub Desktop.
Save benald/f077416df19c1a5d35883cc7a0988093 to your computer and use it in GitHub Desktop.
// Viewport detection
//
//
//
define([
"jquery"
],
function ($) {
var module = {
init: function () {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
var isIphone = ua.indexOf("iPhone") != -1;
var isIpod = ua.indexOf("iPod") != -1;
var isIpad = ua.indexOf("iPad") != -1;
var isIos = isIphone || isIpod || isIpad;
// Correctly measure the width accross all devices
var viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (isAndroid || isIphone || isIpod) {
// Find matches
var mql = window.matchMedia("(orientation: portrait)");
// If there are matches, we're in portrait
if (mql.matches) {
// Portrait orientation
console.log('This is Portriat mode with ascreen width of' + viewWidth);
} else {
console.log('This is landscape mode with ascreen width of' + viewWidth);
alert('Please switch the device to portrait mode for keyboard use');
}
// Add a media query change listener
mql.addListener(function (m) {
if (m.matches) {
// Changed to portrait
console.log('This is Portriat mode with ascreen width of' + viewWidth);
}
else {
// Changed to landscape
console.log('This is landscape mode with ascreen width of' + viewWidth);
alert('Please please please switch the device to portrait mode for keyboard use');
}
});
}
}
};
return module;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment