以不同的分辨率显示不同数量的图像[关闭]

Question

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

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

谢谢

Answer 1

您可以像这样使用 JQuery 检测窗口大小：

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

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

window.screen.availHeight
window.screen.availWidth

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