如何在 javascript 或 css 中粗略确定设备的物理尺寸？

Question

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

如果页面加载在体积较小的设备上，即智能手机上，图形太小无法很好地查看，所以我必须在智能手机客户端的情况下进行更改。

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

我该怎么做？

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

Answer 1

我建议这样做，将这个标签放在 index.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 media query example

Using media queries by Mozilla

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

height: 50vh;
width: 50vw;

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