How to rock different screen sizes

Hi everyone,
I want to make my apps appereance as neat as possible, thus I’ll have to take good care of all possible screen sizes and densities. I haven’t optimized anything yet, so it’s quite blurry. I want my final app to be super sharp, but how am I going to do that? Is there a best-practise approach of how to structure and load images and make use of the screen capabilities that different mobile devices have to offer?
Should I save all images in different sizes or save them in high quality and scale them down accordingly? Sorry for this very basic question, but I think it’s quite crucial to get this right in order to get smashing results.

1 Like

I would store them in higher quality and use the browser to scale them down.

Greetz, bengtler

1 Like

For general layout, media queries are your friend.

For responsive images, look into the picture element. For now, you’ll need to use a pollyfill. There is a really great one called Picturefill:

1 Like

Thank you so much. Issue solved :slight_smile:

Does ‘Picturefill.js’ work with ionic? Anybody tested it?

Why wouldn’t it? It’s HTML/javascript, as is Ionic.

I thought the same but when I tried to use, I can’t make it work. Can you please provide codepen example along with ionic.

Can you provide a codepen example of it not working?

Here is the codepen example that it’s not working:

PS: “img srcset” code only works in home tab but not in other tab or state

Weirdly, I couldn’t even get the examples using the sizes syntax to work ANYWHERE… I tried a very, very basic example on my desktop and didn’t seem to work. Weird.

I forked your pen and used the syntax and it seems to work just fine, however,

EDIT: If the below link doesn’t work, try this.

can i use picturefill with ionic 1? or is it still having issues?