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

Question

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

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

由于

Answer 1

您可以使用CSS实现此目的。 请查看此链接以了解特定于设备的样式：media queries for standard devices

Answer 2

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

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

如果您不想使用JQuery，只需使用JavaScript即可：

window.screen.availHeight
window.screen.availWidth

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