mac 2k显示器 配置

前言

今年5月份买了一个2k显示器,刚收到的时候发现只有一个1080 x 720(HiDPI)分辨率是人眼看起来比较舒服的,于是一直用着。但是直到开始写前端代码的时候,我才发现,网页在2k显示器和内建显示器的布局竟然不一样,恕我无知,直到今天晚上在极度愤怒的情况下才着手解决这个问题,以下是我的记录。

参考

Macmini 连接2K显示器通过BetterDisplay(新版)开启HiDPI - 哔哩哔哩

我也不想重复造轮子了,大体配置看这一篇,感谢本文大佬。

自己的配置

每个人的显示器大小各有差异,显然在上面那篇文章中并没有给出一个统一的分辨率标准,在这里,我想到一个比较好的解决方案(鉴定是前端代码写魔怔了)

首先,你需要准备以下这段代码,粘贴到你的vscode(或者其他编辑器)里面

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: rebeccapurple; width: 100%;">1</div>
</body>
</html>

运行这段代码,并将浏览器开在内建显示器

然后,按下F12,检查div元素,你会看到以下截图内容,于是你得到了你的内建显示器的标准

【1440 x 35.2】

然后再将浏览器窗口移到扩展显示器中,再次检查元素,你会看到到以下截图内容

这是【1080 x 720(HiDPI)】分辨率

这是【1560 x 1040(HIDPI)】分辨率

这是【1440 x 960(HiDPI)】分辨率,与内建显示器的显示效果最接近

但是有意思的是在设置里面查看二者的分辨率还是不一样,而且在这里扩展显示器的分辨率计算又是另一套标准,因此,如果扩展显示器你直接选择(2560 x 1600)肯定和内建显示器不是一样的

可见,同一个div,在不同的分辨率下呈现出不同的宽度,这意味着组件的相对布局也会改变,我在写网页时深有体会,于是今天也是脑子灵光一闪想到这个"光怪陆离"的方法,怎么说呢,不一定是最好的方法,但确实是独属于程序员的一份Romantic。

相关推荐
码农小白13 小时前
qt学习:linux监听键盘alt+b和鼠标移动事件
学习·计算机外设
计算机毕设孵化场14 小时前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
kejijianwen1 天前
沸蛇鼠标,多功能智慧AI,重新定义生产力
人工智能·计算机外设
一秒美工助手1 天前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码,自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设
起鸿OLED方案商2 天前
通威传媒:移动AI数字人OLED透明屏应用案例
显示器
Dnelic-3 天前
查看台式机主机支持的最大分辨率 | 显卡和显示器
计算机外设·计算机显卡
yingge20173 天前
平价鼠标推荐-英菲克PW1有线鼠标
计算机外设
Leoysq4 天前
【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)
计算机外设
起鸿OLED方案商4 天前
OLED透明屏在零售行业有什么应用场景
显示器
起鸿OLED方案商4 天前
OLED透明屏在零售行业有哪些优势
显示器