老旧显示器易因低分辨率、无硬件加速、ie内核等暴露兼容性短板，导致dom操作报错、css错位、canvas/svg异常及console未定义等问题，需针对性降级与fallback。
HTML 本身没有“函数”，但 JavaScript 的 DOM 操作在老旧显示器上容易出什么问题
HTML 是标记语言，不提供函数；真正执行显示逻辑的是 JavaScript（比如 document.getElementById()、element.innerHTML）和 CSS 渲染引擎。老旧显示器本身不“运行代码”，但它会暴露底层渲染链路的兼容性短板：低分辨率（如 1024×768）、无硬件加速、IE 内核浏览器（如 IE8–10）、缺失现代 CSS 属性支持等。
常见错误现象包括：Uncaught TypeError: Cannot read property 'style' of null（元素未加载完就操作）、Object doesn't support property or method 'addEventListener'（IE8 不支持）、文字模糊/错位（CSS transform 或 flex 未加前缀）、Canvas 绘图空白（getContext('2d') 返回 null）。
- 务必在目标环境（如 Windows 7 + IE11 / IE10 虚拟机）中直接打开 HTML 文件测试，不要依赖 Chrome 模拟器——它骗不了真实渲染管线
- 避免用
document.querySelector()，改用document.getElementById()或document.getElementsByTagName()，前者在 IE7–8 中不可用 - 所有事件绑定优先走
attachEvent()（IE）+addEventListener()（现代）双分支，别只写一个
老旧显示器常配 IE 浏览器，console.log 会直接报错怎么办
IE8 及更早版本中，window.console 在开发者工具未打开时是 undefined，任何 console.log() 都触发 Object doesn't support this property or method。这不是显示问题，而是脚本直接中断。
- 在所有 JS 文件最顶部加防御性声明：
if (!window.console) window.console = { log: function() {}, error: function() {}, warn: function() {} }; - 不要用
console.table()、console.group()等 IE 完全不支持的方法 - 调试时优先用
alert()或往页面插入<div id="debug"></div>+document.getElementById('debug').innerHTML += 'xxx'
CSS 渲染在低分屏上错位，关键不是像素值而是 viewport 和缩放行为
老旧显示器常被系统设为“较大文本（125% 或 150%）”，Windows 缩放会干扰 CSS 像素计算，尤其影响 position: fixed、vh/vw 单位、getBoundingClientRect() 返回值。这不是 bug，是 DPI 感知缺失导致的布局漂移。
- 强制关闭缩放兼容性（仅限内部测试页）：在
加<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
—— 注意：IE10+ 才识别该 meta，IE9 及以下需配合@-ms-viewport规则 - 避免用
vh做高度基准，改用px或%（基于父容器），因为100vh在高缩放下可能远超视口实际像素高度 - 检测缩放比例可用
window.devicePixelRatio（IE11+）或粗略估算：document.documentElement.clientWidth / window.screen.availWidth
Canvas 和 SVG 在 IE9–10 下显示异常的硬性限制
IE9 支持 SVG 但不支持 <foreignobject></foreignobject>；IE9–10 支持 Canvas 但缺失 toBlob()、getImageData() 跨域限制更死、canvas.toDataURL('image/webp') 直接报错。这些不是“显示不出来”，而是 API 根本不存在或行为不同。
- 判断 Canvas 可用性不能只查
document.createElement('canvas').getContext，要实测：var c = document.createElement('canvas'); var ctx = c.getContext('2d'); if (!ctx || !ctx.fillRect) { /* 降级到 div 模拟 */ } - SVG 图标建议用内联方式（
<svg>...</svg>），避免<img src="x.svg">—— IE9 对外部 SVG 的 CORS 和 MIME 类型极其敏感 - IE10 不支持
URL.createObjectURL(blob)，上传预览需改用FileReader.readAsDataURL()+img.src = result
真正卡住的往往不是“能不能显示”，而是“有没有 fallback 到能显示的路径”。老旧显示器只是把底层兼容性债务照得更亮而已——它不挑代码，只挑你有没有给它留退路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
