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
I do not know if this is too simple, I press ctrl and scroll and it triggers the media query. I have checked it in bugzilla and it works. I am not sure about the svg scaling as it appears blurry,but it is the svg image.
I use an image resizing library to dynamically create images. For the 2x version I add a dynamic watermark during debugging - this makes it very easy to see if the high-res image is actually being shown or not. Have found it very helpful.
The way this works will vary so not including sample code.
In chrome you can do it by:
1) Open up Chrome Developer Tools and click on the little "gear" icon.
2) Then choose "Show 'Emulation' view in console drawer."
3) Finally, open up the "console drawer" in Developer Tools, and choose Emulation. Set Emulate screen and set the Device Pixel Ratio to 2.5.
Google Chrome Version 80
ctrl-shift j
In Google Chrome version "33.0.1720.0 Canary", you can now emulate devices like iPhone5 and others with a great set of parameters like "Device pixel ratio", "android font metrics" and "Viewport emulation".
There's no need for that Firefox hack anymore - hard to work with, anyway.
Thanks Google dev team! !:)
As far as I can tell, it's not possible other than buying a retina device.
Some Workarounds
Suggested here:
If you doubled up the image sizes and proportions are still the same, you’re pretty much safe. If you don’t have a retina display to test with, switch from the pixel-ratio media query to something width-based.
Testing and Troubleshooting High-Resolution Content
http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html
How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro
http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/
WordPress Retina Images
http://wpmu.org/wordpress-retina/
Less Relevant
How to Create a Responsive, Retina-ready Website
How to Design for Apple’s Retina Displays
http://www.studiopress.com/design/retina-display-design.htm
Building Websites for Retina Displays: Making Friends with Pixels
http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels
How to develop a website for retina display?
how to get retina-ready?