Here is some code to set a cookie with a JSON array on the client then parse the cookie and set breakpoints server side.
I am using jquery.cookie and toolbelt but you can do it with vanilla.js or store morph.
Set a cookie clientside, in the head section add:
In the HTML Profile tab, before the <html> tag, add the following code:
You can now serve content based on screen size. Example:
You can build out on the code to add other window features or stringify a modernizer array.
Unfortunately you will not know the client screen size on their first visit because they have not yet set a cookie. That's just the way it rolls.
I am using jquery.cookie and toolbelt but you can do it with vanilla.js or store morph.
Set a cookie clientside, in the head section add:
Code:
// requires jquery
// requires jquery.cookie
jQuery(document).ready(function($){
var ui_features = new Object();
ui_features.width = $(window).width();
ui_features.height = $(window).height();
$.cookie("ui_features", JSON.stringify(ui_features));
});
Code:
<mvt:item name="ry_toolbelt" param="cookie|load|g.ui_features" /> <mvt:item name="ry_toolbelt" param="assign|g.ui_features|da(g.ui_features)" /> <mvt:item name="ry_toolbelt" param="assign|ui_features|Json_Parse(g.ui_features, 0)" /> <mvt:if expr="g.ui_features:width LT 480"> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-xs-min'" /> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'1'" /> <mvt:elseif expr="(g.ui_features:width GT 479) AND (g.ui_features:width LT 768)"> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-hs-min'" /> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'2'" /> <mvt:elseif expr="(g.ui_features:width GT 767) AND (g.ui_features:width LT 992)"> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-sm-min'" /> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'3'" /> <mvt:elseif expr="(g.ui_features:width GT 991) AND (g.ui_features:width LT 1200)"> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-md-min'" /> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'4'" /> <mvt:else> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:screen|'screen-lg-min'" /> <mvt:item name="ry_toolbelt" param="assign|g.ui_breakpoint:value|'5'" /> </mvt:if>
Code:
<mvt:if expr="g.ui_breakpoint:value GT 3" > <div class="row"> <div class="col-sm-12">This is breakpoint medium 3 or more</div> </div> </mvt:if>
Unfortunately you will not know the client screen size on their first visit because they have not yet set a cookie. That's just the way it rolls.
Comment