On my website, I want to display a row of 5 images that are resized using media queries to fit the screen. The challenge is that on smaller screens like an iPhone 5S, I only want to show 3 images instead of 5. On larger screens like iPad or other devices, all 5 images should be shown. How can I achieve this without creating a separate mobile site? Should I use JavaScript to determine screen size and send that information to my server to decide how many images to retrieve from the database, or is there a better way?
In addition to the visual aspect, these images need to be updated every X seconds, requiring me to fetch a different number of images from the database based on the screen size.
Any suggestions would be greatly appreciated!