判断设备 UA 给网页 Body 添加对应类名

url
ogimage
date
Apr 17, 2025
slug
1744865053
status
Published
tags
开发
前端
JavaScript
设计
平面
summary
由于 Windows 的网页字体渲染太烂, 需要使用一些邪门样式来优化, 于是就需要网页自己判断并提供设备类型属性.
type
Post
由于 Windows 的网页字体渲染太烂, 需要使用一些邪门样式来优化, 但这种邪门操作很难保证不影响原本字体渲染就清晰锐利的平台, 比如 macOS. 于是就需要网页自己判断并提供设备类型属性, 好让我们的邪门样式只应用于 Windows 的访客设备身上.
给网页的 <head> 中注入一个简单的小脚本:
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (navigator.userAgent.includes('Windows')) {
                document.body.classList.add('windows');
            }
        });
    </script>
</head>
这个脚本的作用是等待 DOM 加载完毕然后判断访客的 User-Agent 中的值, 如果含有 Windows 则给 <body> 添加一个类名 windows.
这样就能在访客设备是 Windows 的时候对网页应用专门的样式了.
为了优化 Windows 下的字体渲染效果, 最有效的办法是给文字添加阴影去补齐被 Windows 虚化的字体边缘:
body.windows {
  text-shadow: 0 0 0 black;
}
这样做可以显著提升 Windows 下网页的显示效果, 但要注意这样做也会让实际显示效果中的字体字重看起来变得更粗了, 400 的字重看起来好像变成了 500, 而且有部分文字会发生笔画粘连, 可以相应调整对于 Windows 下的字重.
 

© CXPLAY 2025