如何在javascript或css中粗略地确定设备的物理大小

Question

我正在构建一个包含svg图形的网页。我想让它响应迅速。

如果页面加载在物理上较小的设备(即智能手机(上，则图形太小而无法很好地查看，因此我必须在智能手机客户端的情况下更改它。

确切

的设备甚至确切的屏幕分辨率并不重要。重要的是我可以回答"客户端是小型设备吗？

我该怎么做？

假设这是一个常见问题，那么应该有一个最佳实践，或者一个通用库。你可以帮我吗？

Answer 1

我建议这样做，把这个标签放在索引的头部.html：

<meta name="viewport" content="width=device-width, initial-scale=1">

这将允许您使用媒体查询，您可以在其中根据屏幕大小选择不同的 css 样式属性。一些例子：

@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }

还有许多其他方法可以设置媒体查询，绝对有一种非常适合您要做的事情。

W3 媒体查询示例

使用 Mozilla 的媒体查询

最后，我建议使用vh和vw单位设置height, max-height和width and max-width样式，例如：

height: 50vh;
width: 50vw;

VH 和 VW 代表视口高度和视口宽度。例如，这将使图像的大小正好是设备屏幕大小的一半。