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 寄到你的電子郵件信箱