How to test a website for Retina on Windows without an actual Retina display?

前端 未结 9 1397
Happy的楠姐
Happy的楠姐 2020-12-04 05:49

Is there a way to simulate a Retina display on Windows to test a website for HiDPI displays such as Retina?

I run Windows on a standard 24\" 1920x1080 monitor. Last

相关标签:
9条回答
  • 2020-12-04 06:15

    If you have a mac (or mac osx virtual machine) you can use the ios emulator with xcode. it does blow up the window twice as big, so its not how it appears in real life, but will clearly show you if your images are blurry or not.

    0 讨论(0)
  • 2020-12-04 06:16

    Current Method for Emulating a Retina (HiDPI) Display with Google Chrome

    1) "Right Click" on the web page then select "Inspect" to Open Chrome's Developer Tools

    2) Click the "Toggle Device Mode" Icon

    3) On the Device Dropdown box at the top of the screen, select "Laptop with HiDPI Screen"

    4) You can now view how the website will look on a Retina aka HiDPI screen

    0 讨论(0)
  • 2020-12-04 06:22

    about:config hack on Firefox

    You actually can using Firefox:

    1. Go to "about:config"
    2. Find "layout.css.devPixelsPerPx
    3. Change it to your desired ratio (1 for normal, 2 for retina, etc. -1 seems to be Default.)

    Screenshot:

    Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing! Heads up, not only will the website now be boosted to twice the size, the Firefox UI will also be doubled. This doubling or zooming is necessary, as that's the only way you'll be able to examine all the pixels on a standard pixel ratio screen.

    This works fine on Windows 7 with Firefox 21.0, and also on Mac OS X with Firefox 27.0.1.

    If you're not using media queries and other more advanced logic (i.e. you're feeding everyone the HiDPI images), you can just zoom in with your browser to 200%. The Chrome emulation is a helpful tool as well as it kicks in media queries, but because it prevents zooming, you can't examine image quality.

    Zooming on Firefox & Edge

    Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bug for Firefox, so this could change.

    0 讨论(0)
提交回复
热议问题