Responsive Rule Set

[CharlesParker]

This is the responsive ruleset I use. I was wondering if anyone has anything better, or perhaps a suggestion to tweak it. Feel free to post your own.
You may notice I included a desktop rule as well. I have that because not only is the component used in a PGB but also a web version. I also set the order from largest to smallest and use First True because a desktop will fire tablet rules if the order were reversed.

desktop|||(screen.width >= 1000 && screen.height >= 900) && screen.orientation == 'landscape'Tablet-landscape|||(screen.width >= 400 && screen.height >= 400) && screen.orientation == 'landscape'
Tablet-portrait|||(screen.width >= 400 && screen.height >= 400) && screen.orientation == 'portrait'
Phone-landscape|||(screen.width < 400 || screen.height < 400) && screen.orientation == 'landscape'
Phone-portrait|||(screen.width < 400 || screen.height < 400 ) && screen.orientation == 'portrait'

I hope this leads to as bulletproof a set of rules as can be.

[CharlesParker]

well due to moving the install path awhile back I couldn't find the exact folder where these where stored so I had to come here and get what I posted, lol to save time. These rule sets seem to still work pretty well, but again if anyone has any tweaks to add please do!

[CharlesParker]

To add to this post, I just figured out the final piece of the puzzle to run the "right" rule after the component loads. You just add this to OnRenderComplete (client-side) in the UX
The problem is the page loads and the rule runs but things paint faster than the rules run leaving me to have to turn my phone on its side then back for the page to load right and fill the screen properly.
For instance a panel card layout with two panel cards that will load LTR on a desktop but TTB for mobile devices. The mobile device will always render in like it was cutoff not filling the screen, so then you rotate the phone on its side and back and then the rule runs and the panel cards render TTB filling the screen. This code solves the problem by re-running the current rule with a set time out on render complete

setTimeout(function() {
var ruleName = {dialog.Object}._findActiveLayoutRuleLow();
//execute the rule
{dialog.object}.fireLayoutRule(ruleName);
alert(ruleName);
},3000);​

Another thing of NOTE: The code I posted previously containing the rule set will not run right if you leave in the two/three vertical bars in each line e.g. "desktop|||(screen.width >= 1000" thats just what I copied out of the text file in the rule set.
If you new to AA the rule set when entering it would look like this for "Desktop"

screen.width >= 1000 && screen.height >= 900 && screen.orientation == 'landscape'

Just tested this tonight - it def works well...

[lvasic]

Charles, were you able to test this in Live Preview? When I look in the Chrome debugger, with mobile on, it shows the desk width and height.

[CharlesParker]

I am always a little distrustful of working and live preview - run it published live on your server and test against your device. With a plethora of device sizes from desktops to mobile devices with large screen sizes there just isn't perfect method here. I thought about spending a night just writing rules for the top 25 device screen sizes with default fallbacks but it just isnt worth it to me.

but in answer to your question, yes it appears to be working correctly in Live & working but this is with my screen - yours is probably different - and the rules run in order also some mobile devices have desktop size widths...