安装了黑苹果,作为一名网页前端,感觉要准备转 Windows 了

2018-11-17 10:55:47 +08:00
 alwayshere

准备先体验一下黑果再买白果,淘宝花了一百块钱装了黑苹果,电脑有两个显示器,1080p 27 ”和一个 4k 28 ”的,黑苹果在 1080p 下显示很糟糕,字体显示很糟糕,页面看着极不舒服,然后切换到 4k 屏幕,图片和文字非常小,于是把 4k 缩放成 1080p 的分辨率,咦很不错,文字、UI 都很细腻,不停夸 mac 和 4k 真是原配

但是,网页图片一下就模糊了,一些背景图片或者是网页图片,只要不是矢量 svg 的图片,jpg 和 png 之类的全部模糊得一塌糊涂,因为图片全部放大了。。。

现在就面临一个三难的选择:

  1. 用原生 1080p 屏幕,文字和 ui 惨不忍睹,但网页图片和背景图片清晰锐利
  2. 用原生 4k 屏幕,文字和 UI 必须用放大镜看才清楚,
  3. 用 4k 缩放成 1080p 的伪 1080p 分辨率,文字和 UI 清晰,但是网页图片和背景图片,模糊得不忍直视,叫我一个前端咋调试网页背景图片和纹理

这三盆屎里面如何做选择?

12351 次点击
所在节点    程序员
58 条回复
geelaw
2018-11-17 12:06:05 +08:00
@alwayshere #20 用 media query 查询 DPI 并提供合适大小的图片(例如,我的网站的字体和 DPI 有关系)。此外你可以提供一个高倍数的图片来用( stretch/fill )。

@JerryCha #18 那还得管着 mspaint (逃
SnowTwo
2018-11-17 12:12:49 +08:00
楼上都说的很清楚了,21:9 的 1080 黑果也没你那样的问题。
Moonless
2018-11-17 12:16:27 +08:00
呃。。我们全组前端都用 mac,真香
tulongtou
2018-11-17 12:19:49 +08:00
赶紧换赶紧换
marswu
2018-11-17 12:20:05 +08:00
4k 显示器 黑苹果不是自动 hidpi 么 黑苹果没装好?反正我的黑苹果没出现什么糊。。。
wzw
2018-11-17 12:33:18 +08:00
看来是淘宝没找对人,我之前推荐过一个人,你可以找找
jin5354
2018-11-17 12:40:35 +08:00
macbook 的一大惊艳点就是 retina 的显示效果。。
你装黑果+外接显示器然后吐槽显示差,这个操作无法评论。。
moposx
2018-11-17 12:42:31 +08:00
开启 HiDPI 就好了
yksoft1
2018-11-17 12:55:36 +08:00
表示我连 1366 屏 都能忍受.
geelaw
2018-11-17 12:59:01 +08:00
> 有没有一种技术,让 Mac 只优化文字和 UI,对图片不缩放,让图片继续以 1080p 显示

你是指让浏览器(更特别地,Safari )不缩放图片?因为想用 Web 页面改变 macOS 的性质是不太可能的—— Web 页面本质在一个沙箱里。如果你想改变 macOS 的行为(而不是 Safari 或者 whatever 用户正在用的浏览器 渲染你的这张图的行为 而不改变其他行为),你是在尝试用 global 的方案解决你 local 的问题,这是不好的(最糟糕的情况是:你算老几?用户直接不用你的东西)。

————————

正道是:你需要认识 High DPI、逻辑分辨率和实体分辨率。文字之所以在高 DPI 下锐利,是因为可以从文字的逻辑分辨率下的大小可以算出实体分辨率下的大小,然后绘制正确大小的文字。

假设:
屏幕的实体分辨率是 3840x2160。
图片是 1920x1080 像素。
网页上的图片设置为 1920x1080 像素,这意思是它的逻辑分辨率是 1920x1080。
操作系统上设置的分辨率是实体分辨率。

操作系统上设置的分辨率是 3840x2160,在 200% 缩放下,网页上的图的实体分辨率是 3840x2160,于是浏览器把你的图放大成 3840x2160,然后画到显示器上。

操作系统上设置的分辨率是 3840x2160,在 100% 缩放下,网页上的图的实体分辨率是 1920x1080,没有缩放。

操作系统上设置的分辨率是 1920x1080,在 100% 缩放下,网页上的图的实体分辨率是 1920x1080,没有缩放。*** 但是,因为操作系统只产生了 1920x1080 的内容,通常的屏幕会把它放大到屏幕的实体分辨率,这会在屏幕的级别上缩放一次。

情况 1、3 里面都有缩放,但是使用的算法不同,所以你可能会觉得其中一个不那么糊。

你可以尝试把你的图用软件(选一个你觉得好看的算法)缩放到合适的倍率,如果你没有高分辨率的图。通常来说正确的解决方案是先创建一个分辨率超高的图,然后直接提供这张图;如果带宽是一个问题(或者平台要求提供恰好大小的图),则从这张图缩小。
sutra
2018-11-17 13:44:18 +08:00
@alwayshere 有很多方法。其中一种是配合 background-size。
zhwithsweet
2018-11-17 13:48:47 +08:00
什么前端后端,不都是看预算买电脑吗
alwayshere
2018-11-17 14:05:10 +08:00
@geelaw 看来确实是无解,svg 矢量图和文字可以在 4k 下缩放成真正的物理目标分辨率,而 RAW 格式的 JPG 和 png 在 4k 下,只能是由 4 个像素模拟成原来 1080p 下面的 1 个像素,图片自然就模糊了,大部分网页我看了下都没有在 HTML 上 2x 或 3x 适配 Retina 屏,特别是一些以 GIF 为主的网站更不可能有适配高分屏的备用图片了,所以感觉选 1080p 还是 4k 无非就是在字体清晰和图片清晰二者之间的两难选择吧,我还是选择 1080p 显示器吧,浏览网页图片模糊很不爽
litpen
2018-11-17 14:36:43 +08:00
4k 显示图片在 windows 下同样惨不忍睹吧,作为前端应该知道要适配高分屏用 2x 图的吧
zzzhbooo
2018-11-17 14:44:20 +08:00
我的 macbook pro 连公司 1080p 和 4k 显示器没你说的毛病,这种东西还是去店里或者借认识的人体验一下为好,黑苹果变数太大,实际体验相差很多
icyalala
2018-11-17 15:52:17 +08:00
@geelaw 缩放用于检查布局没问题,但想要体验真实效果如何,眼睛怕是要远离屏幕来看了...
penghong
2018-11-17 16:40:06 +08:00
程序员要对自己好一点。
shijianit
2018-11-17 16:49:07 +08:00
alipay 里面信用租,一个月没多少钱
kios
2018-11-17 16:49:09 +08:00
应该是黑苹果显卡驱动的问题
dremy
2018-11-17 16:57:27 +08:00
怕是要转行了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/508725

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX