Created
July 18, 2014 01:23
-
-
Save milesmatthias/210c5c6dcade0f770678 to your computer and use it in GitHub Desktop.
Mobile detection on CloudFront
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| head | |
| = render partial: 'shared/mobile_detection' | |
| javascript: | |
| var device_cookie = cookie.get('device'), | |
| cookiesEnabled = cookie.enabled(); | |
| if (cookiesEnabled && device_cookie != 'desktop') { | |
| window.location.reload(); | |
| } | |
| body | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js" lang="en-us"> | |
| <head> | |
| <%= javascript_include_tag 'application-mobile' %> | |
| <script> | |
| var device_cookie = cookie.get('device'), | |
| cookiesEnabled = cookie.enabled(); | |
| if (cookiesEnabled && device_cookie == 'desktop') { | |
| window.location.reload(true); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <p id="full_site_btn_wrapper"> | |
| <%= link_to 'View full site', '#', :id => 'view_full_site_btn' %> | |
| </p> | |
| <script> | |
| jQuery('#view_full_site_btn').click(function(e){ | |
| cookie.set('device', 'desktop', { | |
| domain: '<%= Rails.env.development? ? '' : Settings.host %>', | |
| path : '/' | |
| }); | |
| window.location.assign('<%= url_for %>'); | |
| e.preventDefault(); | |
| return false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class ApplicationController < ActionController::Base | |
| before_filter :set_format | |
| def set_format | |
| if request.format.html? && 'mobile' == cookies[:device] | |
| request.format = :mobile | |
| end | |
| end | |
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Example Site</title> | |
| <%= javascript_include_tag "mobile_detection" %> | |
| <script> | |
| function isMobile(){ | |
| var MOBILE_USER_AGENTS = 'palm|blackberry|nokia|phone|midp|mobi|symbian|chtml|ericsson|minimo|' + | |
| 'audiovox|motorola|samsung|telit|upg1|windows ce|ucweb|astel|plucker|' + | |
| 'x320|x240|j2me|sgh|portable|sprint|docomo|kddi|softbank|android|mmp|' + | |
| 'pdxgw|netfront|xiino|vodafone|portalmmm|sagem|mot-|sie-|ipod|up\\.b|' + | |
| 'webos|amoi|novarra|cdm|alcatel|pocket|ipad|iphone|mobileexplorer|' + | |
| 'mobile|zune', | |
| mobile_regex = new RegExp(MOBILE_USER_AGENTS, "i"); | |
| return navigator.userAgent.match(mobile_regex); | |
| } | |
| // setting the device cookie to what we detect | |
| var detected_device = isMobile() ? 'mobile' : 'desktop'; | |
| cookie.set('device', detected_device, { | |
| domain: '<%= Rails.env.development? ? '' : Settings.host %>', | |
| path : '/' | |
| }); | |
| // window.location to whereever you came from | |
| window.location.assign(localStorage.getItem('referrer_href')); | |
| </script> | |
| </head> | |
| <body style="background-color:#f1f1f2"> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class HomeController < ApplicationController | |
| layout 'application' | |
| def get_device | |
| render "get_device.html.erb", :layout => false | |
| end | |
| def set_device | |
| render "set_device.html.erb", :layout => false | |
| end | |
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%= javascript_include_tag "mobile_detection" %> | |
| <script> | |
| if (!window.location.href.match(/get_device|set_device/)){ | |
| console.log('logging the window.location.href = ' + window.location.href); | |
| localStorage.setItem('referrer_href', window.location.href); | |
| } | |
| var device_cookie = cookie.get('device'), | |
| cookiesEnabled = cookie.enabled(); | |
| if (cookiesEnabled && device_cookie == undefined) { | |
| window.location.assign('/get_device.html'); | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //= require cookie |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Example Website</title> | |
| <%= javascript_include_tag "mobile_detection" %> | |
| <meta name="viewport" content="width=device-width, user-scalable=no"> | |
| </head> | |
| <body style="background-color:#f1f1f2"> | |
| <h1>Which device do you want to see the site as?</h1> | |
| <form id="device_selection_form"> | |
| <input type="radio" name="device_option" value="desktop">Desktop</input> | |
| <input type="radio" name="device_option" value="mobile">Mobile</input> | |
| <button id="set_device_btn">Set device</button> | |
| </form> | |
| <script> | |
| document.getElementById('set_device_btn').addEventListener('click', function(e){ | |
| // setting the device cookie to your selection | |
| var options = document.getElementsByName('device_option'), | |
| selected_device = ''; | |
| for(var i=0; i < options.length; i++){ | |
| if (options[i].checked) { | |
| selected_device = options[i].value; | |
| } | |
| } | |
| cookie.set('device', selected_device, { | |
| domain: '<%= Rails.env.development? ? '' : Settings.host %>', | |
| path : '/' | |
| }); | |
| // window.location to whereever you came from | |
| window.location.assign(localStorage.getItem('referrer_href')); | |
| alert('Okay, we set your device to be ' + selected_device); | |
| e.preventDefault(); | |
| return false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment