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

Question

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

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

给我的第一个任务是增加整个网站的字体大小，我做到了，使用下面的代码效果很好

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

现在我有了新的要求，只能将 移动设备的尺寸缩小到正常尺寸 ...所以我正在考虑 if 在上述 JS 函数之前有条件地检测设备是移动设备还是桌面设备。

有什么想法吗？

Answer 1

你可以用JavaScript读出window内宽。

这可能是您要求的 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。

希望对您有所帮助。