如何仅增加桌面设备的字体大小

Question

在 ASP.Net MVC 项目上工作，我不想只是说......寻找一种检测移动/桌面设备的方法。 就像在mozilla web 网站上一样，他们说......你的第一步是尽可能避免它。 首先尝试确定您为什么要这样做。

我搜索并找到了很多答案，但它们都不是有效的或检测移动设备的官方方法，这就是为什么我开始解释我为什么需要它的原因。

给我的第一个任务是增加整个 web 站点的字体大小，我做到了，它使用下面的代码运行良好

    $(function increaseFont() {
    document.body.style.zoom = "150%"
});

现在我有了新的要求，仅将移动设备的尺寸减小到正常值......所以我正在考虑在上述 JS function 之前有一个if条件来检测设备是移动设备还是桌面设备。

请问有什么想法吗？

Answer 1

我会使用标准媒体查询来更改 CSS 属性。 您正在寻找的代码可能类似于以下内容：

@media only screen and (min-width: 768px) { /* Anything larger than a tablet */
  body {
   font-size: large; /* Increases every font size */
  }
}

有关更多信息，您可以查看W3 学校网站。

希望有帮助。

Answer 2

您可以使用 JavaScript 读出 window 内部宽度。

这可能是您要求的 if 条件：

if (window.innerWidth > 768) {
   // do stuff for desktop devices
}

if 条件中的值确定视口所需的最小宽度（以 px 为单位），以执行其主体中的代码。