以不同的分辨率显示不同数量的图像

Question

我必须在我的网站上显示 5 张图片，全部显示在一行中，它们将使用媒体查询调整大小，以便适合屏幕。我的问题是，对于前。 在 iPhone 5S 中我只需要显示 3 张图片 而不是 5 张，因为屏幕很小。在 iPad 和屏幕较大的设备中，我需要显示 5。那么实现这一点的最佳方法是什么？我应该通过 JavaScript 获取屏幕尺寸并将该尺寸传递给我的服务器以决定我应该从数据库中获取多少图像，还是有其他方法可以做到这一点？我不想使用额外的移动网站。

问题不仅仅在于视觉方面。这些图像需要每 X 秒更新一次，因此我需要根据屏幕从数据库中获取不同数量的图像。

谢谢

Answer 1

您可以使用 JQuery 检测 window 大小，如下所示：

$(window).width()
$(window).height()

如果你不喜欢使用JQuery，你可以简单地使用JavaScript:

window.screen.availHeight
window.screen.availWidth

然后您可以将这些值传递给您的服务器并决定加载哪些图像。