Showing content based on screen resolution

Question

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.

Answer 1

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
}   

Answer 2

You can use css media queries to target different screen resolutions. eg:

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
  /* iPad in landscape orientation css */
}
@media only screen and (max-device-width: 480px{
  /* iPhone css */
}

More info:

• https://mislav.net/2010/04/targeted-css/
• https://webdesignerwall.com/tutorials/css3-media-queries

Answer 3

Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.

@media screen, projection and (max-device-width: 800px) {}
@media screen and (max-device-width: 300px) {}

On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.

Answer 4

你应该试试 CSS 媒体查询

Answer 5

In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.

Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.