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

前端开发或者测试的同志们,你们需要关注手机屏幕的 DPR 值吗?

  •  
  •   lostexile · 323 天前 · 2655 次点击
    这是一个创建于 323 天前的主题,其中的信息可能已经有所发展或是发生改变。
    这几天遇到一个页面兼容的问题,在个别老型号的安卓手机上面会有按钮错位的问题。
    大家也知道安卓碎片化的问题很严重,反馈过来之后测试部门也不知道哪个型号的手机屏幕是类似的规格。
    请问各位平时都是怎么解决这种问题的呢?
    尤其是 DPR 这种参数,手机官网没有,测评网站也没有。
    第 1 条附言  ·  323 天前
    我在想,弄个查询网站,可以查所有机型的屏幕参数,包括模拟分辨率,物理分辨率,分辨比率,长款比之类的所有数据,各位同志觉得有必要吗?
    第 2 条附言  ·  323 天前
    再补充一下,如果遇到少见机型不好做适配,可以根据报错机型列出来屏幕素质一样的所有手机型号,方便复现,这个功能觉得有用吗?
    30 条回复    2023-12-29 08:57:23 +08:00
    LabJo
        1
    LabJo  
       323 天前
    放弃冷门型号
    abelmakihara
        2
    abelmakihara  
       323 天前
    碰到过老小米 input 错位
    这种真的没法解决 就普通的 input
    我的建议是尽力就好..
    lostexile
        3
    lostexile  
    OP
       323 天前   ❤️ 1
    我在想,弄个查询网站,可以查所有机型的屏幕参数,包括模拟分辨率,物理分辨率,分辨比率,长款比之类的所有数据,各位同志觉得有必要吗?
    keyrinrin
        4
    keyrinrin  
       323 天前
    1 、使用等比缩放布局,rem ,vw 之类的
    2 、css 尽量使用百分比值
    如果是响应式布局的话要考虑的比较多,很难做到 100%适配
    wangtian2020
        5
    wangtian2020  
       323 天前
    移动端就百分比布局完事了
    hoopz
        6
    hoopz  
       323 天前
    @lostexile 记着好久以前有类似的网站,当时还在做 WAP 开发。
    abcd191898105
        7
    abcd191898105  
       323 天前
    那不是有 rem dp 值吗
    xiyan00
        8
    xiyan00  
       323 天前
    按钮错位根 dpr 有关吗, 我是前端开发, 布局时完全不关心 dpr 这个值, 只在使用图片与绘图时使用 window.devicePixelRatio
    xiyan00
        9
    xiyan00  
       323 天前
    @lostexile 有必要
    BG7ZAG
        10
    BG7ZAG  
       323 天前
    @lostexile zol 中关村?
    lostexile
        11
    lostexile  
    OP
       323 天前
    @xiyan00

    我遇到的情况是这样:底部向上展开的一个弹窗,关闭按钮在右上角,当遇到特殊机型的时候,右上角的关闭按钮就和小程序右上角的关闭胶囊重叠了。
    lostexile
        12
    lostexile  
    OP
       323 天前
    @BG7ZAG

    我确实找了,能找到屏幕像素、尺寸和 PPI ,但是没有物理像素值和 DPR 值。
    平时使用确实足够使用了,但是测试机型不全的时候想找个屏幕素质一样的手机,肯定不知道怎么搜。
    Yuanlaoer
        13
    Yuanlaoer  
       323 天前
    手机的参数信息,尤其是显示屏这一块儿,做测试和开发工作的时候,确实是时不时需要关注的。但这类网站也有不少,我每次都是直接谷歌,好像每次看到的都不是同一家网站。

    弄个查询网站的话,肯定是有价值,但盈利情况如何,就是另一个故事了。
    juzisang
        14
    juzisang  
       323 天前
    遇到过一些很奇葩的机型,PPI 官方给得是个奇数,实际是个除不尽的数,在一些就要精确计算像素的场景,怎么搞都错位,遇到了只能给个 2-3px 的误差值...
    BG7ZAG
        15
    BG7ZAG  
       322 天前
    @lostexile 看看手机中国,里面好像有 PPI 啥的 https://product.cnmo.com/series/1106/param.html
    lyxxxh2
        16
    lyxxxh2  
       322 天前
    不看
    把分辨率改成跟他一样
    至于 dpr 多改几个值 试那个错乱呗
    https://imgur.com/a/d0p09Wa
    APool
        17
    APool  
       322 天前
    xiyan00
        18
    xiyan00  
       322 天前
    @lostexile 你说的这个场景依然和 DPR 没有任何关系, 请使用小程序 API, getSystemInfo, getMenuButtonBoundingClientRect
    如果你的职业是前端开发, 这种基础问题找了这么久都找不出问题所在, 到现在还归因于 dpr, 只能说即使是实习级别依然是不合格的
    Ashore
        19
    Ashore  
       322 天前
    冷门机型直接放弃就行了
    marcong95
        20
    marcong95  
       322 天前
    你想弄查询网站的话,那既然你已知型号网上都查不到 DPR ,那你查询网站的数据库怎么来呢?总不能把所有型号的手机都各买一台吧?

    mydevice.io 之前印象中有收录过一些手机型号的相关信息,但是不齐全。刚刚上去看了下发现已经指向了这里

    https://yesviz.com/viewport/
    lostexile
        21
    lostexile  
    OP
       322 天前
    @xiyan00
    @marcong95


    按道理来讲确实和 DPR 没有关系,之前的实现逻辑也和 DPR 没有关系,所有这个问题是上了生产之后由业务反馈回来的。
    出问题的机型是一加 5T ,我们组几个人讨论了一圈,最后才确定是 DPR 小于某个值才会复现的情况。
    我们在处理这个问题的过程中搜了很多网站,包括 B 站的一些测评视频也找了,都没有这个参数相关的数据,所以才在处理这个 BUG 的问题上浪费了很多时间。

    如果 DPR 或者屏幕 PD 这个参数确实会对前端开发产生影响,那有个数据库方便查询就有需求,所以才来这里开个帖子确认一下,如果大家有数据方面的需求,那就搞一个。这种查询网站技术上永远不是难点,难点就是在数据上,我这次是联系了一加的开发者中心确定了数据,后续如果真的有需要就每家手机厂商都联系一下呗,开发者中心的同事应该都有这些数据的。
    xiyan00
        22
    xiyan00  
       322 天前
    @lostexile 首先确认一下, 你说的 dpr 是不是 `window.devicePixelRatio`, 如果不是, 那就是鸡同鸭讲了, 假设就是 window.devicePixelRatio, 那么你的理解是完全错误的

    dpr 是逻辑像素与物理像素的比例, 这个逻辑像素是针对开发来说的, 脱离开发, 这个概念没有任何意义
    分辨率, PPI 这些才是屏幕的物理参数, dpr 压根就与硬件无关, 与设备无关, 你去哪里查参数
    你所查到的也只是该设备默认设置下特定浏览器的 dpr, 如果你更改了系统字体大小, dpr 随之改变
    所以你的标题就是错的, '屏幕的 DPR 值', 屏幕没有 DPR 值
    你说难点在数据上, 确实难, 因为压根就没有, 你想无中生有去哪搞
    你查到 一加 5T 的 DPR 是多少, 我查到屏幕分辨率是 1080p, 默认设置下 dpr 应该是 3, 你说 dpr <某个值才会复现, 如果 dpr 是 3 还能复现, 那么应该所有设备都能复现

    你们讨论了一圈,最后才确定是 DPR, 估计你还是知其然而不知其所以然
    我想问一下, 出问题的机型是一加 5T, 你们是怎么确定的 DPR 问题, 你测了几个正常的手机 dpr 多少, 一加 5T dpr 又是多少
    lostexile
        23
    lostexile  
    OP
       322 天前
    @xiyan00

    确定是 devicePixelRatio 逻辑像素与物理像素的比例。

    真的,我知道你说的对,我们也都是这么理解。问题报过来之前,我们处理的逻辑就是获取设备和屏幕信息,抛去顶部和底部的各种 bar 之后剩下的是我们实际可用的安全区域。
    我们不是微信小程序的开发环境,是我们公司自己的小程序环境,所以没有小程序那么完备的 sdk 。

    最终确定问题是测试从家里找了一个低 DPR 的手机来,和客户的设备的 DPR 接近,最终我们用测试库的设备确定了 DPR 在 2.6 以下会稳定复现,确实是知其然不知其所以然。一加 5T 的 DPR 我们通过打官方的售后电话确认,应该是 2.17 。
    j5159UqX6UKa360u
        24
    j5159UqX6UKa360u  
       322 天前
    @juzisang 难不成是某为?我就遇到过,在这类型系统我遇到过很多奇葩问题,比如相机返回支持某些参数,实际不支持,别的手机是圆形,他是不规则形状 等等。
    xiyan00
        25
    xiyan00  
       322 天前
    不理解取 statusBar 高度不是 sdk 提供, 而是小程序代码去计算, 我好奇你怎么计算,

    你从代码里获取 dpr, 然后根据这个值来布局, 十有八九是错的, 能够运行也是误打误撞恰好能运行

    高度怀疑你打售后确认的 2.17 这个值, 1080 / 2.17 = 498 了, 没碰到过会有这么宽的

    dpr 不只与设备相关, 与系统设置相关, 与浏览器相关, chrome 和自带浏览器和微信就不一样, 和微信 App 内字体设置也相关, 当然你是自建的小程序 SDK, 那么根据具体算法也是相关, 这么多变量 2.17 这个值是怎么得出来的
    xiyan00
        26
    xiyan00  
       322 天前
    @lostexile 估计是不理解你说的 dpr, 沟通了好久, 然后从哪里找出个数值应付你
    lostexile
        27
    lostexile  
    OP
       322 天前
    @iamyourking

    确实是😂,看来你也遇到过这个问题哈😂


    @xiyan00

    我是从小程序环境提供的 sdk 获取屏幕高度的,但是 sdk 确实没有提供 statusBar 高度,所以我说我们的小程序环境不是很完备么,我是做页面的开发,在小程序环境里面拿到屏幕的值然后去计算的,谁能想到和这个值有关系呢。
    xiyan00
        28
    xiyan00  
       322 天前
    我是说你的代码逻辑是错的, 与这个值相关是因为你用了这个值, 而且用错了
    xiyan00
        29
    xiyan00  
       322 天前
    如果你压根就不关心这个值, 不用, 布局就不会错
    lostexile
        30
    lostexile  
    OP
       322 天前
    @xiyan00
    咱俩说的是一个意思,旧的逻辑里面没有用到这个值,但是出错了。
    我们尝试了一下加入这个值,解决了,只是不知道为什么会解决…………
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5548 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:44 · PVG 14:44 · LAX 22:44 · JFK 01:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.