如何用javascript或css粗略确定设备的物理大小?

我建议这样做,把这个标签放在索引的开头。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表示视口高度和视口宽度。例如,这将使图像的大小正好是设备屏幕大小的一半。