The new default is Default-568h@2x.png. (note hyphen) There is no other corresponding change. If you need a different image for the new iPhone 5 screen then you have to create it as a separate name. There is no 1x/2x/new phone auto switching behavior.
It would be nice, but this is impossible to do like this. LESS compiles your media queries to actual media queries, so at compile time there is no indication of which media query will be relevant to the browser. After compile time you just have CSS not less so you can’t have variables anymore. You … Read more
According to everything that I’ve read recently, browsers seem to be moving towards the resolution media query expression. This is instead of device-pixel-ratio that is being used in the currently accepted answer. The reason why device-pixel-ratio should only be used as a fallback is because it is not a standard media query. According to w3.org: … Read more
I just created a test app and tested. So for devices without retina: ImageName.png – For iPhone/iPod ImageName~ipad.png — For iPad For devices with retina display: ImageName@2x.png – For iPhone/iPod ImageName@2x~ipad.png — For iPad And you can still use @2x if your iPhone high resolution image and iPad high resolution image have the same size. … Read more
The most interesting clue in this mystery is that it seems especially bad when you open the same storyboard on a Retina display as opposed to a non-retina display. At first I was going back and forth between a 4k iMac and a pre-retina Macbook pro and was getting a large volume of changes (~300 … Read more
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.) 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! This was done … Read more
Search for, download, and install Apple’s free Additional Tools for Xcode 8 (for previous Xcode releases search for Graphics Tools for Xcode according to your version). Note: free Apple Developer account required. Launch Quartz Debug application. Go to menu: Window —> UI Resolution. Check Enable HiDPI display modes. Quit Quartz Debug. Open System Preferences. Select … Read more
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 … Read more
There is a new attribute for the img tag that allows you to add a retina src attribute, namely srcset. No javascript or CSS needed, no double loading of images. <img src=”https://stackoverflow.com/questions/13744542/low-res.jpg” srcset=”https://stackoverflow.com/high-res.jpg 2x”> Browser Support: http://caniuse.com/#search=srcset Other Resources: WebKit release post W3C documentation for srcset good explanation about why and how to use srcset … Read more
In order to detect the Retina display reliably on all iOS devices, you need to check if the device is running iOS4+ and if the [UIScreen mainScreen].scale property is equal to 2.0. You CANNOT assume a device is running iOS4+ if the scale property exists, as the iPad 3.2 also contains this property. On an … Read more