Best IT Recipes

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

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

I run Windows on a standard 24 "monitor of 1920x1080. Last night I checked my website on the familiar new 15-inch Retina MacBook Pros, and the graphics all looked vague (much worse than on a regular 15-inch MacBook), while while the font was super crisp and sharp, which makes the logo even worse due to direct comparison.

I followed this tutorial to make my Retina site ready:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

I used the retina.js approach since I have no background images.

Is there a way to check if this really works? Obviously, I could ask my friend to use his Retina Notebook, but this is not a workable task for me. I want to be able to at least rudely test websites for Retina compatibility in my own environment.

+76
html css retina-display
Mar 21 '13 at 15:11
source share
8 answers

about: config hack on Firefox

In fact, you can use Firefox:

  • Go to the "about: config" section
  • Find "layout.css.devPixelsPerPx
  • Change it to the desired ratio (1 for normal, 2 for retina, etc. -1 by default.)

Screenshot:

26854390370_c7844dde05_z.jpg

Refresh your page - boom, your media query is now kicked! Hats for Firefox for being awesome for web development! Heads up, not only will the website size be doubled now, the Firefox user interface will also be doubled. This doubling or scaling is necessary, as this is the only way to examine all the pixels on the standard pixel screen.

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

If you do not use multimedia queries and other more complex logic (i.e. you write to all HiDPI images), you can simply increase the scale of your browser up to 200%. Chrome emulation is a useful tool, as well as pings in media queries, but since it prevents scaling, you cannot check the image quality.

Scaling on Firefox and Edge

On Firefox and Edge, if you zoom in, dppx-based media queries are currently running. Therefore, this simple approach may be sufficient, but keep in mind that the functionality is reported as a “do not fix” bug for Firefox, so this may change.

+143
Jun 21 '13 at 5:17
source share

In the Google Chrome version “33.0.1720.0 Canary”, you can now emulate devices such as iPhone5 and others with a wide range of parameters, such as “Device pixel ratio”, “Android font metrics” and “Viewport emulation” .

There is no need to hack Firefox anymore - it’s hard to work, anyway.

Thanks to the Google development team !! :)

+24
Nov 27 '13 at 10:48 on
source share

In chrome you can do this:

1) Open Chrome Developer Tools and click on the small "gear" icon. enter image description here



2) Then select "Show Emulation in Console Box". enter image description here



3) Finally, open the “console box” in the Developer Tools and select Emulation . Set Screen Emulation and set the Device Pixel Ratio to 2.5.

enter image description here

+13
Apr 22 '14 at 23:04
source share

As far as I can tell, this is not possible other than buying a retina device.

Some solutions

Less relevant

+10
Mar 21 '13 at 16:59
source share

Current Retina Display Emulation Method (HiDPI) with Google Chrome

1) Right-click on a web page, then select Inspect to open Chrome Developer Tools

2) Click the " Switch device mode " icon

Click the device switch mode icon

3) In the "Device" drop-down list at the top of the screen, select " laptop with HiDPI screen "

Choose a laptop with a HiDPI screen

4) Now you can see how the website will look on the Retina aka HiDPI screen.

+6
Mar 10 '16 at 11:06
source share

I use the image resizing library to dynamically create images. For version 2x, I add a dynamic watermark during debugging - this makes it very easy to see if a high resolution image is actually displayed. Found it very helpful.

The way this works will vary, therefore not including sample code.

0
Nov 21 '17 at 23:18
source share

I don’t know if this is too much, I press ctrl and scroll and run the media query. I tested it in bugzilla and it works. I'm not sure about svg scaling as it looks blurry, but this is an svg image.

-one
Sep 24 '14 at 17:33
source share

If you have a Mac (or Mac OS x virtual machine), you can use the ios emulator with xcode. it blew the window twice as much, so it’s not the way it appears in real life, but it will clearly show you if your images are blurry or not.

-2
Apr 14 '14 at
source share


More articles:


All Articles