A media `resolution` in `dpi` or `dpcm` converts to dppx at 160 dpi, so `(min-resolution: 300dpi)` matches a 2x screen

未关闭适合新手

#544 创建于 2026年10月29日 0 条评论 0 个 reaction 已指派 0 人在 GitHub 查看

维护者通常 3 天内回复

还没有人认领这个 Issue。

评估

难度: 2/5
预计耗时: 1-3 小时
新手友好度: 78/100

Issue 类型: 缺陷
描述清晰度: 描述清楚
活跃度: 活跃
技术栈: react-native, typescript
领域: testing

调研方向

从 src/compiler/media-query.ts 中的 parseMediaFeatureValue 开始；issue 指出它会转换 dpi 和 dpcm 值，以便与 PixelRatio.get() 比较。运行复现测试 src/__tests__/native/media-resolution-units.test.tsx；该测试会显示哪些分辨率用例通过、哪些失败。当 300dpi 和 100dpcm 用例与 2x 屏幕不匹配，而 2dppx、192dpi 和 75dpcm 用例仍然匹配时，即为完成。

由索引模型根据 Issue 内容生成。

描述

Before submitting a new issue

I tested using the latest version of the library, as the bug might be already fixed.
I tested using a supported version of react native.
I checked for possible duplicate issues, with possible answers.

Bug summary

parseMediaFeatureValue (src/compiler/media-query.ts) turns a resolution into dots per px for the runtime to compare with PixelRatio.get(), dividing dpi by 160 ("Mobile devices use 160 as a standard") and dpcm by 160 × 2.54. css-values-4 fixes 1dppx at 96dpi, and a dot per centimetre is 2.54 dots per inch, so (min-resolution: 300dpi), 3.125dppx, matches a 2x screen, and so does (min-resolution: 100dpcm), 2.65dppx.

The 300dpi and 100dpcm cases fail, matching a screen below their resolution; the 2dppx, 192dpi and 75dpcm cases pass.

Library version

main at 2421ea7 (0.0.0-nightly.2421ea7)

Environment info

System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 155.26 GB / 255.67 GB
Binaries:
  Node:
    version: 26.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 4.9.2
    path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 12.2.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "35"
      - "35"
      - "35"
      - "36"
      - "37"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-26 | Google APIs Intel x86_64 Atom
      - android-28 | Google APIs Intel x86_64 Atom
      - android-29 | Google APIs Intel x86_64 Atom
      - android-30 | Google APIs Intel x86_64 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-32 | Google APIs Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-37.0 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-262.9437.185.2621.16467767
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.20.1
    path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.86.3
    wanted: 0.86.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

Clone the reproducer branch, which is main at 2421ea7 with one file added, src/__tests__/native/media-resolution-units.test.tsx, and install:

git clone --branch repro/544-media-resolution-units https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
yarn install

Run yarn jest src/__tests__/native/media-resolution-units.test.tsx.

src/__tests__/native/media-resolution-units.test.tsx:

import { PixelRatio } from "react-native";

import { render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS, testID } from "react-native-css/jest";

test.each([
  ["(min-resolution: 2dppx)", true],
  ["(min-resolution: 192dpi)", true],
  ["(min-resolution: 300dpi)", false],
  ["(min-resolution: 75dpcm)", true],
  ["(min-resolution: 100dpcm)", false],
])(`on a ${PixelRatio.get()}x screen, @media %s matches: %s`, (condition, expected) => {
  registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
  render(<View testID={testID} className="a" />);
  expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
});

Expected: (min-resolution: 300dpi), 3.125dppx, and (min-resolution: 100dpcm) do not match a 2x screen.

Actual: both match a 2x screen, read at 160 dpi to the dppx.

The run's output on main at 2421ea7, Windows 11, Node 26.12.1

FAIL src/__tests__/native/media-resolution-units.test.tsx
  √ on a 2x screen, @media (min-resolution: 2dppx) matches: true (17 ms)
  √ on a 2x screen, @media (min-resolution: 192dpi) matches: true (4 ms)
  × on a 2x screen, @media (min-resolution: 300dpi) matches: false (3 ms)
  √ on a 2x screen, @media (min-resolution: 75dpcm) matches: true (1 ms)
  × on a 2x screen, @media (min-resolution: 100dpcm) matches: false (1 ms)
  ● on a 2x screen, @media (min-resolution: 300dpi) matches: false
    expect(received).toBe(expected) // Object.is equality
    Expected: false
    Received: true
      14 |   registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
      15 |   render(<View testID={testID} className="a" />);
    > 16 |   expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
         |                                                               ^
      17 | });
      18 |
      at toBe (src/__tests__/native/media-resolution-units.test.tsx:16:63)
  ● on a 2x screen, @media (min-resolution: 100dpcm) matches: false
    expect(received).toBe(expected) // Object.is equality
    Expected: false
    Received: true
      14 |   registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
      15 |   render(<View testID={testID} className="a" />);
    > 16 |   expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
         |                                                               ^
      17 | });
      18 |
      at toBe (src/__tests__/native/media-resolution-units.test.tsx:16:63)
Test Suites: 1 failed, 1 total
Tests:       2 failed, 3 passed, 5 total
Snapshots:   0 total
Time:        1.087 s, estimated 2 s
Ran all test suites matching /src\\__tests__\\native\\media-resolution-units.test.tsx/i.

Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/544-media-resolution-units

主要语言: TypeScript
星标: 166
派生: 45
平均合并: 13 天 14 小时
30 天内合并 PR: 1

环境准备

没有 Dockerfile 或 Docker Compose 文件
没有 Pull Request 模板
阅读贡献指南

从这里开始

先读完整个 Issue，再读项目的贡献指南。
在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
Fork 仓库，在一个分支上完成修改。
提交 Pull Request，并在描述里引用这个 Issue 编号。

nativewind/react-native-css 的其他 Issue

The Tailwind test harness's `render` throws on an element whose child is text
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 78/100

nativewind/react-native-css#545 · 2026年10月29日创建

维护者通常 3 天内回复
`useNativeVariable("--x")` fails to type-check in a React Native app: the package types it `() => never`
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 78/100

nativewind/react-native-css#543 · 2026年10月29日创建

维护者通常 3 天内回复
`overflow: scroll` is refused, though React Native's `overflow` takes it
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 84/100

nativewind/react-native-css#540 · 2026年10月29日创建

维护者通常 3 天内回复
A runtime `calc()` drops `infinity`: `width: var(--r)` over `--r: calc(infinity * 1px)` renders nothing
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 78/100

nativewind/react-native-css#538 · 2026年10月29日创建

维护者通常 3 天内回复
An infinite `rem`, `em` or `vw` length skips the px clamp and reaches React Native as `null`
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 76/100

nativewind/react-native-css#537 · 2026年10月29日创建

维护者通常 3 天内回复

查看 nativewind/react-native-css 的全部 Issue

相似的 Issue

fix(worker): keep normal prepare waiting states failure-free
可能已有人在做 @LichKing-2234 今天认领。未关闭
- 哪里不对？
agent:codex priority:P1

难度 2/5 1-3 小时新手友好度 72/100

AgoraIO-Extensions/agent-infra#3745 · 2026年10月29日创建

维护者通常 1 天内回复
The five-line work window can drop its oldest line: the per-line byte share ignores the JSON framing
可能已有人在做 @Eapp1e 今天认领。未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 84/100

makecindy/cindy#7973 · 1 条评论 · 2026年10月29日创建

维护者通常 1 天内回复
[good first issue, hacktoberfest] 🌋 Hacktoberfest Task - Add new Japanese Idiom 945 (good-first-issue)
未关闭
- 哪里不对？
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs

难度 1/5 1 小时以内新手友好度 78/100

lingdojo/kana-dojo#33337 · 1 条评论 · 5 个 reaction · 2026年10月29日创建

维护者通常 1 天内回复
🤖 ci: wait_pr_codex.sh usage-limit check trusts any author's request comment
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 76/100

coder/xum#7733 · 1 条评论 · 2026年10月29日创建

维护者通常 1 天内回复
Flaky: js-kernel-webview goBack()/goForward() fails with "a navigation is already pending"
未关闭
- 哪里不对？
难度 2/5 1-3 小时新手友好度 78/100

code-yeongyu/senpi#4917 · 1 条评论 · 2026年10月29日创建

维护者通常 1 天内回复

更多 TypeScript Issue

A media `resolution` in `dpi` or `dpcm` converts to dppx at 160 dpi, so `(min-resolution: 300dpi)` matches a 2x screen

哪里不对？

评估

调研方向

描述

Before submitting a new issue

Bug summary

Library version

Environment info

Steps to reproduce

Reproducible example repository

环境准备

从这里开始

nativewind/react-native-css 的其他 Issue

哪里不对？

哪里不对？

哪里不对？

哪里不对？

哪里不对？

相似的 Issue

哪里不对？

哪里不对？

哪里不对？

哪里不对？

哪里不对？

把新 issue 发到你的邮箱