Search code examples
javascriptjqueryscreen-resolution

Showing content based on screen resolution

I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.

What i need is a javascript function like this:

if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}

If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks

It would be nice with examples for the html code too.

Solution

  • you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.

    you can also use this class Mobile Detect 

    include("Mobile_Detect.php");
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
     // any mobile platform
}