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

Posted 2023-05-08

【中文标题】如何仅增加桌面设备的字体大小

【英文标题】：How to increase font size only for desktop device

【发布时间】：2020-07-30 18:25:23

【问题描述】：

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

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

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

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

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

有什么想法吗？

【问题讨论】：

我更喜欢使用媒体查询，例如gist.github.com/gokulkrishh/242e68d1ee94ad05f488

【参考方案1】：

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

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

欲了解更多信息，您可以查看W3 Schools Website。

希望对您有所帮助。

【讨论】：

感谢蒂姆·范赫。其余的工作正常，但我现在更关心具有 834 * 1112 和 Kindle 设备 (800 * 1280) 的 iPad Pro（10.5 英寸） 在我的浏览器上看到的视口 Firefox 响应式设计模式。 他们的视口比您提到的 768 大。 不确定是否考虑了移动设备？

两者都应该没问题。它们被算作平板电脑，这使它们变得相当模棱两可（根据我的经验）。如果您想排除它们增加字体大小，只需将min-width 调整为 835。

非常感谢 Tim VanH

【参考方案2】：

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

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

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

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

【讨论】：

在this link 他们说不要回复 window.innerWidth 以检测移动设备。这是一个隐藏的评论。