Released in FarCry 6.2
One of the cool new features of FarCry 6.2 is the introduction of Mobile and Tablet webskins. While fully responsive designs are cool and all, very often its helpful to use a hybrid approach and deliver *different* views to different device formats.
With FarCry you can add device detection based on client user agent string, and device specific webskins for mobile and tablets.
Mobile webskins are prefixed with mobile* (e.g. mobilePageStandard, mobileBody, mobileTypeBody, etc), and similarly Tablet webskins are prefixed with tablet*. Desktop webskins continue to use the prefix display*. You must ensure the mobile* and tablet* webskin prefixes have been added to the Webskin security section of the Anonymous role for the new device specific webskins to be accessible.
One final note is that any objects that make use of the "displayMethod" property (particularly dmHTML) will automatically detect the appropriate webskin based on the current device type. So if you have a dmHTML object with a displayMethod of "displayPage3Col" and you are currently viewing the site as a "mobile" device the framework will automatically look for a webskin called "mobilePage3Col" and try to use it if it exists, otherwise if you haven't implemented a mobile view for that displayMethod it will fall back to "displayPage3Col" (i.e. the desktop version of the page).
Enabling Device Specific Webskins
Additionally, device detection and device specific webskins must be enabled in your projects `farcryConstructor.cfm` if you wish to use them, e.g:
<cfset THIS.bUseDeviceDetection = true />
<cfset THIS.bUseMobileWebskins = true />
<cfset THIS.bUseTabletWebskins = false />
Remember to do an updateapp after changing these settings in the farcryConstructor!
Switching Between Device Modes
<skin:loadJS id="jquery" /><!--- not required for farcry core 7.x --->
<skin:loadJS id="farcry-devicetype" />
And in your footer add links such as (note the double # in case you're putting this inside a cfoutput tag):
<a class="fc-switch-device-desktop" href="##">Full Site</a>
<a class="fc-switch-device-mobile" href="##">Mobile Site</a>
(Similarly for switching to tablet webskins you would use the classname "fc-switch-device-tablet" and place the relevant JS in your tabletHeaderStandard, etc).