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.
pull/813/merge
Grant Bourque 7 years ago committed by Thibaut Courouble
parent dd6f34a89d
commit d5d913fc11

@ -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

Loading…
Cancel
Save