Html 不同的设备具有相同的像素，但作用不同

我目前正在为一个网页的模板工作，我目前正在为它的响应工作。我的桌面版和手机版都很好用。我现在面临的问题是，我正在尝试为平板电脑制作一个版本。我现在使用的“平板电脑”是一款具有96 dpi的surface pro。我的桌面上有一个旧的1080显示器。因此，当我在桌面上用开发工具打开chrome时，像素宽度与桌面相同或接近，但看起来完全不同。桌面上一行上的文本在两行上显示，而不是全部显示。这是一个问题的原因是这是页面的标题。在全宽的表面上，它的作用更像是桌面上的半宽。我想这可能是因为表面的屏幕DPI较高，但不确定。这是造成这种情况的原因吗？如果是的话，你如何修复它。将平板电脑的媒体查询设置为800px对台式电脑和某些平板电脑有效，但似乎对surface之类的设备无效。那么，有没有其他设置宽度的方法？我有网站的代码，但我不认为它会有任何帮助。如果需要，请告诉我。

尝试使用

vh

（视口高度）作为高度，使用

vw

（视口宽度）作为宽度，它使用窗口的百分比

100vh

将使用车窗高度的100%，而

100vw

将使用车窗宽度的100%。它比使用像素更好，并且需要更少的工作才能使页面响应，像素不一致且容易损坏。

您能分享一个例子吗？好的，谢谢您的快速响应。我要试一试。再次感谢你。