javascript - 如果用户的设备是 iOS，如何更改字体系列 css

Question

我正在使用一种特殊的字体来显示内容。它适用于大多数设备，但不适用于 iOS 设备。因此，当用户拥有 Apple 设备但其他设备正常显示时，我需要更改字体系列 css。我该怎么做？

我附上了一些伪代码:

if(IOS)  { html,body,h1,h2,h3,h4,h5 { line-height: 150%; font-family: "Open Sans", sans-serif}
}else{
html,body,h1,h2,h3,h4,h5 { line-height: 150%; font-family: "Noto Sans Sinhala", sans-serif}
}

Answer 1

完成此任务的一种方法是使用用户代理嗅探技术，如下所示:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

因此，在实践中它会是:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
    // iOS specific styles
}
else {
    // other styles
}

我建议您将所有样式都放在一个样式表文件中，并且只包含字体系列(以及仅 随设备变化的样式)。所以你的完整代码可能看起来像这样(假设这个 JavaScript 在你的 html 文件的头部):

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
    document.write("<style>body { font-family: x }</style>");
}
else {
    document.write("<style>body { font-family: y }</style>");
}

您可以在 this answer 中阅读有关检测 iOS 的更多信息.