css - rem 不尊重智能手机上的用户设置

Question

我正在尝试使用 rem 来尊重用户对字体大小的设置:

我首先在我的 css 文件中添加了以下内容:

html { font-size: 62.5%; }

然后我将 font-size 作为 rem 添加到我的元素中。例如:

.header{
font-size: 1.5 rem;
}

在桌面上，甚至在模拟器上，它都工作正常，这意味着当我在浏览器中更改字体大小设置时，我可以看到我的页面字体大小发生变化以反射(reflect)浏览器设置，但是在我尝试的手机(例如 iPhone)中

1) 前往“设置”>“通用”>“辅助功能”>“更大的文本”。2) 点击更大的辅助功能尺寸以获得更大的字体选项。3) 拖动 slider 以选择所需的字体大小。

我没有看到任何变化。有没有我需要使用的技巧，或者是否有可能？

Answer 1

你可以使用 rem 和 -apple-system-body 让它工作

@import url("https://fonts.googleapis.com/css?family=Raleway");
html { 
    /* Must go on the HTML tag to work with rem */
    font: -apple-system-body;
}
p {
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
}


<p>This is some text in my page.</p>

更多信息:http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type