Ipad Retina vs Non-Retina

1

Hi Everyone.
I am building my first Ipad app with ionic it has been great for productivity so far.

I am probably missing something really obvious but I designed the app for Ipad 2 so a non-retina display.
When i put this app on the ipad Air (retina display) (on ionic viewer) even though I have the images set to only a width of 768 pixels, the app is still displaying across the full width of the ipad air.

What is the ipad air doing to achieve this? At first I thought I would need the images size doubled to get it to show up correctly on the ipad air but it is already? Is there some kind of default scaling already going on in ionic?

I know this is probably obvious to those who have made apps before but I can’t seem to figure out why it would auto scale those images?

2

The way retina works is it will scale things up to match the same perceived resolution. So if the non retina resolution is 100x100, and the retina resolution is 200x200, when the app renders things on the screen the software will render at 200x200, then scale down.

There are different ways to have resources utilize retina images, and to keep things crisp and clear you’ll want to make sure any resources also have a 2x size or 3x size. There are a lot of guides with specifics off the forums and I’d recommend you check them out.

Essentially it’s a trick to make things more clear, not really up the perceived resolution of a device.

http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web/

This is a good article, and it’s just ONE of like probably 10000