Browse Source

Improve mobile detection + handle iOS side view

Thibaut Courouble 9 years ago
parent
commit
29efcef748

+ 1 - 9
assets/javascripts/app/app.coffee

@@ -242,15 +242,7 @@
     !!(@DOC or @doc)
 
   isMobile: ->
-    try
-      # 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.
-      @_isMobile ?= (window.matchMedia('(max-device-width: 767px)').matches) or
-                    (window.matchMedia('(max-device-height: 767px) and (max-device-width: 1024px)').matches) or
-                    (navigator.userAgent.indexOf('Android') isnt -1 and navigator.userAgent.indexOf('Mobile') isnt -1) or
-                    (navigator.userAgent.indexOf('IEMobile') isnt -1)
-    catch
-      @_isMobile = false
+    @_isMobile ?= app.views.Mobile.detect()
 
   isInvalidLocation: ->
     @config.env is 'production' and location.host.indexOf(app.config.production_host) isnt 0

+ 11 - 0
assets/javascripts/views/layout/document.coffee

@@ -3,6 +3,9 @@ class app.views.Document extends app.View
 
   @el: document
 
+  @events:
+    visibilitychange: 'onVisibilityChange'
+
   @shortcuts:
     help:       'onHelp'
     escape:     'onEscape'
@@ -38,6 +41,14 @@ class app.views.Document extends app.View
   setTitle: (title) ->
     @el.title = if title then "DevDocs - #{title}" else 'DevDocs API Documentation'
 
+  onVisibilityChange: =>
+    return unless @el.visibilityState is 'visible'
+    @delay ->
+      location.reload() if app.isMobile() isnt app.views.Mobile.detect()
+      return
+    , 300
+    return
+
   onHelp: ->
     app.router.show '/help#shortcuts'
 

+ 12 - 0
assets/javascripts/views/layout/mobile.coffee

@@ -9,6 +9,18 @@ class app.views.Mobile extends app.View
   @routes:
     after: 'afterRoute'
 
+  @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
+      # 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
+      (navigator.userAgent.indexOf('IEMobile') isnt -1)
+    catch
+      false
+
   constructor: ->
     @el = document.documentElement
     super