Original Summary

I was working on responsive layouts and device previews for the new Duo Outer + Inner formats and ran into an annoying issue in Chrome DevTools. Using the physical screen resolutions directly made websites behave like they were running on a huge desktop viewport, so everything became way too small. The fix was to use the CSS viewport + DPR relationship instead: Duo Outer: 466 × 678 CSS px @ DPR 3 Duo Inner: 951 × 669 CSS px @ DPR 3 That maps to: 1398 × 2034 physical pixels 2853 × 2007 physical pixels I ended up packaging the setup into a small open-source repo so other designers, developers and QA people can use the same profiles without setting everything up manually. It includes: Windows installer macOS/Linux installer Manual setup Troubleshooting / diagnostics Chrome profile path instructions Custom device configs GitHub: [ https://github.com/OhForPeteSake/iphone-duo-chrome-devtools-profiles ]() Free to use, modify and share. Would be interested to hear how other people handle custom or foldable device testing in Chrome DevTools.   submitted by   /u/OhForPeteSake91 [link]   [comments]

  • 情报分类：硬件与数码
  • 分类依据：内容涉及硬件、数码产品或通信卡
  • 信息来源：Reddit · SideProject
  • 发布时间：2026/10/7 20:20:12