Fixed issue where respond.js would trick SimpleStateManager into thin…

…king the matchMedia API was fully supported.

README.md

@@ -18,6 +18,9 @@ Documentation can be found at http://www.simplestatemanager.com
 
 ##Release Log
 
+###2.2.4 - March 12, 2014
+* Fixed issue where respond.js would trick SimpleStateManager into thinking the matchMedia API was fully supported.
+
 ###2.2.3 - February 14, 2014
 * Fixed issue where the width of the browser would not always match the media query
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "SimpleStateManager",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "main": "src/ssm.js",
   "ignore": [
     "**/.*",

docs/js/script.js

@@ -14,15 +14,15 @@
     ssm.addState({
         id: 'tablet',
         minWidth: 768,
-        maxWidth: 1023,
+        maxWidth: 991,
         onEnter: function(){
             document.getElementById('hero').style.backgroundColor = "#f0b958";
         }
     });
 
     ssm.addState({
         id: 'desktop',
-        minWidth: 1024,
+        minWidth: 992,
         onEnter: function(){
             document.getElementById('hero').style.backgroundColor = "#e8a631";
         }

index.html

@@ -56,7 +56,7 @@
                 <div class="container">
                     <img src="docs/images/ssm-logo.png" class="logo">
 
-                    <h1>Simple State Manager 2.2.2</h1>
+                    <h1>Simple State Manager 2.2.4</h1>
 
                     <p class="lead">Simple State Manager (SSM for short) is a javascript state manager for responsive websites. It is built to be light weight, has no dependencies (except javascript of course) and aims to be really easy to simply drop into your project ready to use.</p>
                     <a class="btn btn-large btn-primary" href="https://github.com/jonathan-fielding/SimpleStateManager/archive/master.zip">Download</a>
@@ -322,6 +322,12 @@ <h2>Browser Support</h2>
                 <div class="container">
                     <h2>Release Log</h2>
                     <p>SimpleStateManager follows <a href="http://semver.org/">Semantic Versioning 2.0.0</a></p>
+
+                    <h3>2.2.4 - March 12, 2014</h3>
+                    <ul>
+                        <li>Fixed issue where respond.js would trick SimpleStateManager into thinking the matchMedia API was fully supported.</li>
+                    </ul>
+
                     <h3>2.2.3 - February 14, 2014</h3>
                     <ul>
                         <li>Fixed issue where the width of the browser would not always match the media query</li>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "SimpleStateManager",
   "description": "SimpleStateManager ==================",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "main": "src/ssm.js",
   "scripts": {
     "test": "grunt travis --verbose"

src/ssm.js

@@ -252,9 +252,21 @@
     };
 
     var getWidth = function () {
-        var x = 0;
+        var x = 0,
+            testQuery = null,
+            supportsQueries = false;
 
         if(typeof window.matchMedia === "function"){
+            testQuery = window.matchMedia('(width: 100px)');
+
+            if(typeof testQuery.addListener !== "undefined"){
+                supportsQueries = true;
+            }
+        }
+
+        if(supportsQueries){
+            testQuery = window.matchMedia('(width: 100px)');
+
             //Browsers that support match media we will test our method does same as media queries
             if(window.matchMedia('(width:'+window.innerWidth+'px)').matches){
                 x = window.innerWidth;
@@ -277,6 +289,7 @@
             //IE 6+ in 'standards compliant mode'
             x = document.documentElement.clientWidth;
         }
+
 
         return x;
     };