-
☆ A M B ☆
- 397 Posts
Has anyone implemented a way to check for device screen size and accordingly save this information for use in MODX? One could then according to screen size decide what chunks or snippets to use for example.
Anyone have any ideas on this topic?
Here is an example article where they show how they did it with Expression Engine:
http://smashed.by/detector-turorial
[ed. note: sonicpunk last edited this post 13 years, 7 months ago.]
Benjamin Davis: American web designer living in Munich, Germany and a MODX Ambassador. I am also co-founder of SEDA.digital, a MODX Agency.
discuss.answer
-
☆ A M B ☆
- 397 Posts
What I did was write the following javascript that saves the browser screen size as a cookie:
(function(){
var width=(window.innerWidth > 0) ? window.innerWidth:screen.width;
document.cookie="sitewidth=" + width;
})();
Then I created a snippet that I place at the top of my templates that save the sitewidth variable to the session:
<?php
if (isset($_COOKIE['sitewidth'])){
$_SESSION['sitewidth'] = $_COOKIE['sitewidth'];}
?>
Then in another snippet I check the session variable and accordingly write a chunk based on if the screen size is less than or equal to a particular setting:
<?php
$output='';
$mywidth=$_SESSION['sitewidth'];
if ($mywidth <= 1024){
$output.='{{'.$ipadChunk.'}}';
} else {
$output.='{{'.$desktopChunk.'}}';
};
return $output;
?>
This code in particular is for evolution. But you should be able to get the idea. It seems to work ok.
Benjamin Davis: American web designer living in Munich, Germany and a MODX Ambassador. I am also co-founder of SEDA.digital, a MODX Agency.
