Mobile configuration

Main idea of mobile configuration is reduce group margin, left only one group per page, and use few tricks from this article.

Theming

We have few fields that help you make more usable board for mobiles.

In config:

{
   ...
   entitySize: ENTITY_SIZES.SMALL, // it will help you make tiles smaller
   customTheme: CUSTOM_THEMES.MOBILE // or WINPHONE - they also make tiles more usable for mobile 
   ...
}

Also don't forget to reduce margins: groupMarginCss: '5px', tileMargin: '5px'

Semi-responsive

Here some hack to make tiles fill all width of phone screen. We need to calculate tileSize for the screen width.

var groupWidth = 3; // count of tiles horizontally
var tileMargin = 5; // px
var groupMargin = 5; // px

var tileSize = getTileSize(groupWidth, tileMargin, groupMargin);

function getTileSize (groupWidth, tileMargin, groupMargin) {
   var width = window.innerWidth;
   width -= groupMargin * 2 + tileMargin * (groupWidth - 1);
   return +(width / groupWidth).toFixed(1);
}

Then you should use your tileSize in config tileSize: tileSize

How do I divide configs on mobile and non-mobile?

Mostly it's for you to decide. Easy-mode: Add suffix to the url ?mobile and in your config use something like:

if(/[?&]mobile/.test(location.search)) {
   var CONFIG = {/*mobile config*/};
}
else {
   var CONFIG = {/*non-mobile config*/};
}

There's millions ways to solve this problem. Use your imagination or code above :)