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

Posted

技术标签:

【中文标题】如何仅增加桌面设备的字体大小【英文标题】: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 * 1112Kindle 设备 (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 以检测移动设备。这是一个隐藏的评论。

以上是关于如何仅增加桌面设备的字体大小的主要内容,如果未能解决你的问题,请参考以下文章

手机和桌面字体大小的区别

如何通过一次声明使字体大小响应不同尺寸的设备[重复]

请问Fedora Gnome3桌面如何更改字体大小

字体大小反应原生

仅更改 NSAttributedString 的字体大小

基本字体大小与移动设备