Question

我正在一个项目中，我需要根据用户需要更改字体样式和大小，例如用户设备的字体大小是否大于网页的字体大小。

例如，您的android或ios设备的基本字体大小如下所示

主标题-18px 次要标题-16px 内容-14像素

和您的网站主页字体大小为

主标题-16像素次要标题-18px 内容-12px

现在，我想检测android或ios设备的字体大小以更改我的网页字体大小。

Answer 1

（从上面的评论继续）。

var div = document.getElementsByTagName('body')[0]; // this will set the body tag as variable
// this taken from here: https://stackoverflow.com/a/7444724/6525081
function css( element, property ) { 
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}
alert( css( div, 'font-size' ) );

详细了解getComputedStyle here

您可以检查类似的小提琴here

希望有帮助。

Answer 2

您应该使用媒体查询，此命令可让您为某些屏幕尺寸定义特定样式，并遵循有关使用方法的教程

示例：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Complete tutorial here

如果要根据设备源的大小更改源，请使用rem

这是一种以浏览器中配置的字体大小为基础的度量

示例：

div{
   font-size: 1rem
}

Here's the rem tutorial

我们可以在Web项目的移动设备中检测字体大小或字体系列吗？

2 个答案: