javascript - 向网站添加缩略图

Question

所以我正在学习如何通过构建图片库来制作网站。

我使用的图像很大，所以意识到我可以放入调整大小的图像作为缩略图，并决定使用 500px 宽度的图像

这些缩略图在移动设备上看起来很清晰，在平板电脑上看起来不错，但在桌面上却很模糊。
所以我认为手机和平板电脑需要 500 像素，但桌面设备需要 700 像素。

所以这给我带来了在运行时在两者之间进行选择的问题。

据我了解，我可以通过两种方式做到这一点。

1. 通过 JavaScript 检查屏幕尺寸，使用 JavaScript 在浏览器(客户端)上生成 html(还不知道如何执行此操作)。

2. 检查用户代理中的字符串“Mobile”并决定服务器。

或者还有其他方法吗？那么这两种方法哪一种更好或者缺点更少呢？

我猜“2”更好，因为即使禁用 javascript，它也能工作
我正在使用 Perl Dancer2 如果它有任何帮助的话

Answer 1

我认为最好的选择是使用媒体查询，如图所示 here

您始终可以在 html 中写入两种尺寸，但使用媒体查询时只会显示一种尺寸。

另一种方法是使用 javascript 获取窗口的高度和宽度，您将知道正在使用网络的客户端具有什么分辨率，因此您可以附加到图像 _full 或 _low 以区分这种情况。

我不建议您使用 UserAgent，因为有些旧电脑的分辨率低于实际移动设备的分辨率，因此我认为最好使用窗口的 dpi/分辨率。

您有一些媒体查询的示例 here