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

Question

正在ASP.Net MVC项目上工作，我不想只是说... 寻找一种检测移动/台式设备的方法。在mozilla网站上，他们说。 。您的第一步是尝试避免这种情况。首先尝试确定要执行的why。

我搜索并找到了很多答案，但是它们都不是有效的检测移动设备的方法，也不是一种正式的检测移动设备的方法，这就是为什么我先解释为什么需要它。

给我的首要任务是增加整个网站的字体大小，而我做到了，并且使用下面的代码，它可以正常工作

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

现在我有了新的要求，将仅适用于移动设备的尺寸减小到正常水平，所以我考虑在上述JS函数之前使用if条件来检测设备是移动设备还是台式机。

请问有什么主意吗？

Answer 1

您可以使用JavaScript读取窗口的内部宽度。

这可能是您要的if条件：

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

if条件中的值确定了视口的最小宽度，以执行其主体中的代码。

Answer 2

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

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

有关更多信息，您可以签出W3 Schools Website。

希望有所帮助。