How to get css mediaquery breakpoint using javascript.

December 13, 2014

Reading time ~1 minute

Motivation

It is waste of time to fix the value of breakpoint for responsive design if you have that value in css and javascript. In the following case you have to fix both 400 and 400px.

ccs

@media screen and (min-width: 400px){
  body:after{
    content: 'desktop';
    display: none;
  }
}

Javascript

// ....
// ....
var minWidth = 400;

function isSp(){
   return !(minWidth < window.innerWidth);
}

using window.getComputedStyle

css

@media screen and (min-width: 400px){
  body:after{
    content: 'desktop';
    display: none;
  }
}

javascript

// desktop or ''
var deviceWidth = window.getComputedStyle(document.body,':after').getPropertyValue('content');

function isSp(){
  return deviceWidth !== 'desktop';
}

Deomo

http://codepen.io/Tkashiro/full/zxqwBK

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015