V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
alwayshere
V2EX  ›  程序员

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

  •  
  •   alwayshere · 2018-11-17 10:55:47 +08:00 · 12517 次点击
    这是一个创建于 2203 天前的主题,其中的信息可能已经有所发展或是发生改变。

    准备先体验一下黑果再买白果,淘宝花了一百块钱装了黑苹果,电脑有两个显示器,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 清晰,但是网页图片和背景图片,模糊得不忍直视,叫我一个前端咋调试网页背景图片和纹理

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

    第 1 条附言  ·  2018-11-17 12:10:58 +08:00
    感谢各位提醒,是我作为一名前端知识不足,原来是网页没给图片适配 Retina 屏的缘故,现在我有一个问题,两个显示器尺寸都差不多,1080p 显示图片细腻,有没有一种技术,让 Mac 只优化文字和 UI,对图片不缩放,让图片继续以 1080p 显示
    58 条回复    2018-11-19 15:41:30 +08:00
    wukongkong
        1
    wukongkong  
       2018-11-17 11:00:07 +08:00 via Android   ❤️ 1
    为啥我的 1080 一点问题都木有…
    chinvo
        2
    chinvo  
       2018-11-17 11:00:54 +08:00 via iPhone
    网页模糊 @2x 和 @4x 了解一下
    niubee1
        3
    niubee1  
       2018-11-17 11:03:18 +08:00   ❤️ 19
    我觉得吧, 你还是去苹果店去体验白的再说, 这好比你去二手车市场买了辆四处漏风的拼装宝马, 开完来吐槽宝马不好开, 合适么?
    eastlhu
        4
    eastlhu  
       2018-11-17 11:03:53 +08:00
    4k 开启 hidpi。另外这个效果肯定是你黑果没装好,我 1080p 正常的很。
    huclengyue
        5
    huclengyue  
       2018-11-17 11:05:07 +08:00 via Android
    windows 开 200%缩放一样图片模糊
    Hucai
        6
    Hucai  
       2018-11-17 11:05:39 +08:00
    4K 开启 HiDPI ?
    zuoakang
        7
    zuoakang  
       2018-11-17 11:09:14 +08:00 via Android
    1080P 黑果效果不如 win10 吗?
    zuoakang
        8
    zuoakang  
       2018-11-17 11:10:06 +08:00 via Android
    能否把淘宝地址贴出来
    geelaw
        9
    geelaw  
       2018-11-17 11:14:35 +08:00 via iPhone
    无解的,因为设置合适的 DPI、native 物理分辨率的时候,网页上的图片糊不糊和操作系统没关系。
    zocome
        10
    zocome  
       2018-11-17 11:16:53 +08:00
    开启 HiDPI 试试,我就是 1080p 的机器,开启 HiDPI 之后使用正常
    kingcos
        11
    kingcos  
       2018-11-17 11:17:56 +08:00 via iPhone
    有些网页根本就没适配 Retina …
    比如 Sony 官网…

    @zuoakang 一搜就有
    herozzm
        12
    herozzm  
       2018-11-17 11:23:42 +08:00 via iPhone
    因为网站制作者没有适配苹果的高清屏,合格的应该要适配的
    icyalala
        13
    icyalala  
       2018-11-17 11:23:53 +08:00   ❤️ 2
    如果系统设置没错的话,图片糊了说明你的图片不是 2x 的,用 Mac 和 iPad 的人看到也是同样是模糊。
    你应该提升图片分辨率,来适配高分屏,这就是前端应该用 Mac 的理由之一,不然你都不知道别人看到的图片是糊的。。
    likuku
        14
    likuku  
       2018-11-17 11:34:27 +08:00
    本来 MacBook 就是个卖屏幕送电脑的产品,你非要这么玩...

    有些时候没有物理高分屏根本看不出高清素材和普通素材的差别,
    之前作过 12K 的视频,iMac 5K 屏以下显示器根本看不出问题,只有拿到 5K 屏下查看和播放才能看到明显的后期 bug
    xixibb
        15
    xixibb  
       2018-11-17 11:34:55 +08:00
    4k 没开 hidpi 那就糊咯。。。
    geelaw
        16
    geelaw  
       2018-11-17 11:42:08 +08:00 via iPhone
    @icyalala #13 今日小知识:你甚至可以在任何浏览器里面用有级缩放调整网页 viewport 的逻辑分辨率。
    yopming
        17
    yopming  
       2018-11-17 11:45:32 +08:00   ❤️ 1
    作为前端为什么都 2018 年了还不知道网页图片模糊的原因是什么吗?

    第一盆屎是自己的
    第二盆屎是淘宝装黑苹果的没有完全驱动好显卡吧?没有中间选项可以调吗?
    第三盆屎是某些网站的设计师和工程师的
    JerryCha
        18
    JerryCha  
       2018-11-17 11:47:44 +08:00   ❤️ 2
    4. 向 Adobe、Canon、Sony、Nikon 投诉,不允许他们的用户再生成 4K 以下的素材
    sutra
        19
    sutra  
       2018-11-17 11:51:05 +08:00
    网页图片模糊是因为你的网页的图片没有提供 2x 3x... 的图片,这样的网页在别人的 Retina 屏幕上看起来就是糊的感觉。
    alwayshere
        20
    alwayshere  
    OP
       2018-11-17 12:00:51 +08:00 via iPhone
    @sutra 那 css background-image 怎么 2x 和 3x
    geelaw
        21
    geelaw  
       2018-11-17 12:06:05 +08:00 via iPhone
    @alwayshere #20 用 media query 查询 DPI 并提供合适大小的图片(例如,我的网站的字体和 DPI 有关系)。此外你可以提供一个高倍数的图片来用( stretch/fill )。

    @JerryCha #18 那还得管着 mspaint (逃
    SnowTwo
        22
    SnowTwo  
       2018-11-17 12:12:49 +08:00
    楼上都说的很清楚了,21:9 的 1080 黑果也没你那样的问题。
    Moonless
        23
    Moonless  
       2018-11-17 12:16:27 +08:00
    呃。。我们全组前端都用 mac,真香
    tulongtou
        24
    tulongtou  
       2018-11-17 12:19:49 +08:00
    赶紧换赶紧换
    marswu
        25
    marswu  
       2018-11-17 12:20:05 +08:00
    4k 显示器 黑苹果不是自动 hidpi 么 黑苹果没装好?反正我的黑苹果没出现什么糊。。。
    wzw
        26
    wzw  
       2018-11-17 12:33:18 +08:00 via iPhone
    看来是淘宝没找对人,我之前推荐过一个人,你可以找找
    jin5354
        27
    jin5354  
       2018-11-17 12:40:35 +08:00
    macbook 的一大惊艳点就是 retina 的显示效果。。
    你装黑果+外接显示器然后吐槽显示差,这个操作无法评论。。
    moposx
        28
    moposx  
       2018-11-17 12:42:31 +08:00 via Android
    开启 HiDPI 就好了
    yksoft1
        29
    yksoft1  
       2018-11-17 12:55:36 +08:00
    表示我连 1366 屏 都能忍受.
    geelaw
        30
    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
        31
    sutra  
       2018-11-17 13:44:18 +08:00
    @alwayshere 有很多方法。其中一种是配合 background-size。
    zhwithsweet
        32
    zhwithsweet  
       2018-11-17 13:48:47 +08:00 via iPhone   ❤️ 1
    什么前端后端,不都是看预算买电脑吗
    alwayshere
        33
    alwayshere  
    OP
       2018-11-17 14:05:10 +08:00 via iPhone
    @geelaw 看来确实是无解,svg 矢量图和文字可以在 4k 下缩放成真正的物理目标分辨率,而 RAW 格式的 JPG 和 png 在 4k 下,只能是由 4 个像素模拟成原来 1080p 下面的 1 个像素,图片自然就模糊了,大部分网页我看了下都没有在 HTML 上 2x 或 3x 适配 Retina 屏,特别是一些以 GIF 为主的网站更不可能有适配高分屏的备用图片了,所以感觉选 1080p 还是 4k 无非就是在字体清晰和图片清晰二者之间的两难选择吧,我还是选择 1080p 显示器吧,浏览网页图片模糊很不爽
    litpen
        34
    litpen  
       2018-11-17 14:36:43 +08:00
    4k 显示图片在 windows 下同样惨不忍睹吧,作为前端应该知道要适配高分屏用 2x 图的吧
    zzzhbooo
        35
    zzzhbooo  
       2018-11-17 14:44:20 +08:00
    我的 macbook pro 连公司 1080p 和 4k 显示器没你说的毛病,这种东西还是去店里或者借认识的人体验一下为好,黑苹果变数太大,实际体验相差很多
    icyalala
        36
    icyalala  
       2018-11-17 15:52:17 +08:00
    @geelaw 缩放用于检查布局没问题,但想要体验真实效果如何,眼睛怕是要远离屏幕来看了...
    penghong
        37
    penghong  
       2018-11-17 16:40:06 +08:00
    程序员要对自己好一点。
    shijianit
        38
    shijianit  
       2018-11-17 16:49:07 +08:00
    alipay 里面信用租,一个月没多少钱
    kios
        39
    kios  
       2018-11-17 16:49:09 +08:00 via iPhone
    应该是黑苹果显卡驱动的问题
    dremy
        40
    dremy  
       2018-11-17 16:57:27 +08:00 via iPhone   ❤️ 1
    怕是要转行了
    DearTanker
        41
    DearTanker  
       2018-11-17 17:18:52 +08:00
    赶紧换 Windows 保平安,越晚入坑越好。现在苹果真的是太贵啦。
    JCZ2MkKb5S8ZX9pq
        42
    JCZ2MkKb5S8ZX9pq  
       2018-11-17 17:50:25 +08:00
    图片糊可能是没设 x2,最简单的方案嘛看看苹果官网的写法就明白了。
    字体糊的话,有可能是不少比较老的网站,默认字体还是 simsun,没有 sans-serif。
    还有个排除法嘛,把你页面挂网上,找个正常苹果比对看看咯。
    songkl
        43
    songkl  
       2018-11-17 18:02:23 +08:00 via Android
    mac 缩放 甩 Windows 几条街吧。你这一百块 花的不值,要是看着 tonymacx86.com 自己装 不好的话 还是 先别折腾黑苹果,搞个白苹果,买不起新的 收二手也行啊😯。
    KgM4gLtF0shViDH3
        44
    KgM4gLtF0shViDH3  
       2018-11-17 18:12:07 +08:00 via iPhone
    我觉得加个妙控板比较好,配置高的黑苹果体验是能秒白苹果的
    qq258076067
        45
    qq258076067  
       2018-11-17 20:52:54 +08:00
    用了好久黑苹果了,是你的问题。。。尤其是 4k 屏幕 黑苹果应该是比 win 舒服。。
    witcherhope
        46
    witcherhope  
       2018-11-17 22:38:22 +08:00
    这个跟 macOS 没有任何关系吧,只要是 4k 缩放,图片分辨率低,就会模糊,win 平台也不例外。
    um1ng
        47
    um1ng  
       2018-11-17 22:39:48 +08:00
    图样图森破
    gouflv
        48
    gouflv  
       2018-11-17 22:56:14 +08:00 via Android
    确定你是真的那种前端?
    ihuguowei
        49
    ihuguowei  
       2018-11-17 22:56:58 +08:00 via Android
    你是前端???
    tailf
        50
    tailf  
       2018-11-18 00:43:28 +08:00 via Android
    拼装宝马好评
    loading
        51
    loading  
       2018-11-18 07:59:37 +08:00 via Android
    切图前端?
    kfchyc
        52
    kfchyc  
       2018-11-18 12:39:07 +08:00 via iPhone
    黑果 Safari 什么时候没出过问题?
    tanpengsccd
        53
    tanpengsccd  
       2018-11-18 16:44:47 +08:00 via iPhone
    4k 显示器建议 21.5 寸样子 1080P 分辨率。imac 就是这个分辨率尺寸
    zuoakang
        54
    zuoakang  
       2018-11-18 17:24:21 +08:00 via Android
    @wzw 能否贴下地址?在你的列表里没有找到你所说的推荐地址。
    wzw
        55
    wzw  
       2018-11-18 17:57:55 +08:00
    @zuoakang #54 搜索都不用呀,,,,

    https://www.v2ex.com/t/463243
    shuperjolly
        56
    shuperjolly  
       2018-11-18 19:20:25 +08:00
    黑苹果的驱动需要时间去调试的,淘宝上的我不是针对谁,真的全都是垃圾,运气好的话驱动完整一点,运气不好的话 N 多的问题。
    zuoakang
        57
    zuoakang  
       2018-11-19 14:18:15 +08:00 via Android
    @wzw 谢谢,已经联系他了,要 100 块。他没有淘宝店铺,你现在的系统是什么版本?还稳定不?
    wzw
        58
    wzw  
       2018-11-19 15:41:30 +08:00
    @zuoakang #57 你可以再看一遍我的帖子
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3253 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 00:18 · PVG 08:18 · LAX 16:18 · JFK 19:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.