From d5d913fc11460bdc3fc3483f1a45921b7cc6d6b7 Mon Sep 17 00:00:00 2001 From: Grant Bourque Date: Sat, 9 Jun 2018 19:12:18 -0500 Subject: [PATCH] Use browser dimensions for mobile detection - Use `max-width`/`max-height` mobile detection media queries instead of `max-device-width`/`max-device-height`. Some browsers inaccurately report the device dimensions and get the mobile version of the DevDocs unexpectedly. Not depending on the device dimensions also improves the experience by displaying the mobile version if a desktop browser window is sufficiently small enough. --- assets/javascripts/views/layout/mobile.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/javascripts/views/layout/mobile.coffee b/assets/javascripts/views/layout/mobile.coffee index ae6f9940..cb87a323 100644 --- a/assets/javascripts/views/layout/mobile.coffee +++ b/assets/javascripts/views/layout/mobile.coffee @@ -16,8 +16,8 @@ class app.views.Mobile extends app.View @detect: -> try (window.matchMedia('(max-width: 480px)').matches) or - (window.matchMedia('(max-device-width: 767px)').matches) or - (window.matchMedia('(max-device-height: 767px) and (max-device-width: 1024px)').matches) or + (window.matchMedia('(max-width: 767px)').matches) or + (window.matchMedia('(max-height: 767px) and (max-width: 1024px)').matches) or # Need to sniff the user agent because some Android and Windows Phone devices don't take # resolution (dpi) into account when reporting device width/height. (navigator.userAgent.indexOf('Android') isnt -1 and navigator.userAgent.indexOf('Mobile') isnt -1) or