simple-breakpoint-detector

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'  
});

helpers.is-tablet.js

import Ember from 'ember';

export function isTablet(params/*, hash*/) {  
   var mq = window.matchMedia("(max-width:" + params + ")");    
  return mq.matches;
}

export default Ember.HTMLBars.makeBoundHelper(isTablet);

initializers.breakpoint-detector.js

export function initialize(container, application ) {
  
  application.inject('controller', 'breakpointDetector', 'service:breakpoint-detector');
}

export default {
  name: 'breakpoint-detector',
  initialize: initialize
};

services.breakpoint-detector.js

import Ember from 'ember';

export default Ember.Service.extend({
  isTablet: false,
  mqMaxTablet : '959px',
  mq: null,
  init(){
    this._super(...arguments);
   this.start(); 
  },
  start(){ 
    var mq = window.matchMedia("(max-width:" + this.get('mqMaxTablet')+ ")");    
    mq.addListener(this.viewportChanged);
    var self = this;
    window.onresize = function(){
      self.viewportChanged();
    };
    this.viewportChanged(mq);
    this.set('mq', mq);
  },
  viewportChanged: function(mq){
    mq = mq || this.get('mq');    
            if(mq.matches){
                this.set('isTablet', true);
            }
    else{
      this.set('isTablet', false);
    }
        }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
Is Tablet : {{breakpointDetector.isTablet}}
<br/>
Is Tablet (helper) : {{is-tablet '959px'}}
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.11.0",    
    "ember-template-compiler": "1.11.0"
  },
  "addons": {}
}