Trouble with browser recognizing turboclasses

[Philip Johnson]

Hey!

Really loving your plugin and currently retrofitting an existing client's desktop site with restive.js to make responsive. Has been working exactly as expected up until a few days ago.

Now, it seems whenever I'm using the chrome emulator or other user agent emulators, it doesn't always pick up that I'm on a mobile device, but only picks up the resolution.

Is this a known issue or could I be doing something wrong?

Here's the snippet I'm using on the page.

<script> $( document ).ready(function() { $('body').restive({ breakpoints: ['320', '480', '768', '1024'], classes: ['320-css', '480-css', '768-css', '1024-css'], turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet', force_dip: false }); }); </script>

Any help would but appreciated! Thanks!

[Obinwanne Hill]

Hi pjatx,

Didn't see any snippet?!

I'm not too sure but I'm suspecting your problem has to do with process. Restive.JS uses sessionStorage to cache data. When you load the Web page and then you use the Emulator button, all the variables would already have been set.

As a result, you may have to reset all existing session variables, and then reload the page to get the expected outcome.

To do this, simply do this after you enter the Emulation state:

1. Enter the following code into the browser console: while (sessionStorage.length) sessionStorage.removeItem(sessionStorage.key(0));
2. Reload the web page

You can also read this blog post on A Better Way to Test Responsive Websites for more tips on using Emulators.

Let me know if this made any difference.

[Gavin Foley]

I was having the same issue. Clearing the session and reloading the page with emulator already set fixed this for me.

[Philip Johnson]

Thanks guys! That did the trick. Not sure my snippet didn't show up in the first place. Cheers.

[Obinwanne Hill]

Sure, No problem.