diff --git a/.github/upcoming/mobile-view-fallback.md b/.github/upcoming/mobile-view-fallback.md new file mode 100644 index 0000000..c9cf617 --- /dev/null +++ b/.github/upcoming/mobile-view-fallback.md @@ -0,0 +1,3 @@ +#### Fix + +- Fallback to fixed width if mobile html element is missing diff --git a/src/js/modules/mobile-view.js b/src/js/modules/mobile-view.js index 5c92104..482af4f 100644 --- a/src/js/modules/mobile-view.js +++ b/src/js/modules/mobile-view.js @@ -12,12 +12,16 @@ export function isMobileAgent(agent = navigator.userAgent) { /** * Check if is a mobile based on selector being visible frontend + * Falls back to a screen-width check if the selector doesn't match an element * @param {string} selector + * @param {number} breakpoint - width (px) used as the mobile fallback threshold when selector isn't found * @returns {boolean} * @example isMobileView() */ -export function isMobileView(selector = '.mobileNavigation') { - return document.querySelector(selector).offsetParent !== null; +export function isMobileView(selector = '.mobileNavigation', breakpoint = 715) { + const element = document.querySelector(selector); + + return element ? element.offsetParent !== null : window.innerWidth <= breakpoint; } /**