Chrome亚像素渲染影响固定/绝对定位元素
Chrome亚像素渲染影响固定/绝对定位元素
提问于 2020-09-28 05:02:12
我有一个基于电子的应用程序，为采矿工程师提供类似CAD的经验。该软件包括一个十字光标：
它的风格如下：
position: fixed;
overflow: visible;
width: 0;
height: 0;这四个横发段是具有以前样式的div的子段，每个十字段具有绝对位置和宽度/边框作为样式：
position: absolute;
right: 10px;
top: 2px;
width: 80px;
height: 4px;
background-color: #ffffff;
border: 1px solid #000000;取决于光标放置的位置，它在厚度上波动，即使CSS是静态的和绝对的。将下一张图片与上面的图片相比，它更窄了，我所做的就是移动鼠标几个像素：
从我的研究来看，这是亚像素渲染的结果，这是很好的，只是我不认为一个具有绝对定位和大小样式的div仅仅因为它位于屏幕的另一个部分就会波动。我可以理解，如果在一些显示器是更厚，但我仍然希望它是一致的。
有人对此有洞察力吗？它是以电子为基础的，所以只有铬需要考虑，我不想设置整个应用程序的亚像素渲染只是为了解决这个小问题。
回答 1
Stack Overflow用户
发布于 2022-04-27 21:50:05
可能有几个选项可以根据设备缩放来检测和调整光标。可以查看window.devicePixelRatio以检查当前大小。
窗口属性devicePixelRatio返回当前显示设备以物理像素为单位的分辨率与以CSS像素表示的分辨率的比率。此值也可以解释为像素大小的比率:一个CSS像素的大小与一个物理像素的大小之比。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个CSS像素。
或者您可以考虑使用CSS分辨率进行此操作。
// 76dpi * 1.25 = 95dpi; 96dpi * 1.25 = 120dpi; those are 2 common monitor resolutions
@media (resolution: 120dpi) {
.cursor {
width: 2px; // just an example
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64096196
复制相关文章
相似问题
腾讯云开发者
