如何仅增加桌面设备的字体大小
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 * 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 以检测移动设备。这是一个隐藏的评论。以上是关于如何仅增加桌面设备的字体大小的主要内容,如果未能解决你的问题,请参考以下文章