How to test a website for Retina on Windows without an actual Retina display?
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 night I checked out my website on a friends brand new 15" Retina MacBook Pro and the graphics looked all blurry (far worse than on a regular 15 inch MacBook), while the font was super crisp and sharp, making the logo appear even worse because of the direct comparison.
I have followed this tutorial to make my website Retina ready:
http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs
I used the retina.js approach since I don't have any background images.
Is there any way for me to test if this actually works? Obviously I could ask my friend to use his Retina Notebook but that is not a feasible workflow for me. I want to be able to at least roughly test websites for Retina compatibility it in my own environment.
about:config hack on Firefox
You actually can using Firefox:
- Go to "about:config"
- Find "layout.css.devPixelsPerPx
- Change it to your desired ratio (1 for normal, 2 for retina, etc. -1 seems to be Default.)
Screenshot:
(source: staticflickr.com)
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.
- How to set iframe size dynamically
- Making a img appear/disappear in html5
- How to escape HTML
- Bootstrap label overlay
- Stuck showing my information taken from the input field
- Ant Design Table with vertical and horizontal scroll
- Two div blocks on same line
- How to allow 'Open in a new tab' when using ng-click?
- Applying zoom into point like Aseprite
- Specifying multiple targetOrigin uris in postmessage
- Get input field value from Elementor Pro Form
- How to Submit a form without reloading page
- How to determine if element is last or first child of parent in javascript/jquery?
- Moving mat-icon to left of expansion panel header title?
- How do I position the buttons at the bottom in the q-input field?
- Dynamically changing the attributes of a HTML element?
- Where do I get a "3 horizontal lines" symbol for my webpage?
- Escape </ in script tag contents
- Find html label associated with a given input
- border-box of input not working as expected
- Typescript error "Property 'value' does not exist on type 'HTMLElement'", "Property 'onclick' does not exist on type 'Element'"
- How to remove the text-decoration underline; from the span element inside the flex parent?
- Emojis in Angular html template
- How to make a delete button to delete an item, to which it belongs, from the list?
- Bootstrap tabs in Chrome extension popup
- <mat-toolbar> changes height of all page
- JavaScript: get custom button's text value
- redirect to appstore or google play
- Is there a way to add a blank data attribute to an element using JavaScript?
- Fixed element positioning relative to its parent