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

Question

我正在构建一个包含svg图形的网页。我想让它变得敏感。

如果页面加载在物理上较小的设备（即智能手机）上，图形太小而无法正常查看，因此我必须在智能手机客户端的情况下进行更改。

确切的设备甚至精确的屏幕分辨率并不重要。重要的是，我可以回答问题＆＃34;客户端是小型设备吗？＆＃34;。

我该怎么做？

假设这是一个常见问题，应该为此或公共库提供最佳实践。你能救我吗？

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代表视口高度和视口宽度。例如，这将使图像的大小正好是设备屏幕的一半大小。