How to rock different screen sizes


#1

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.


#2

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

Greetz, bengtler


#3

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:

http://scottjehl.github.io/picturefill/


#4

Thank you so much. Issue solved :slight_smile:


#5

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


#6

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


#7

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.


#8

Can you provide a codepen example of it not working?


#9

Here is the codepen example that it’s not working: http://codepen.io/mainalikishan/pen/ghvxt

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


#10

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. http://s.codepen.io/boomerang/99016f0839baa02b98db802a1e6ae48a1408028566723/index.html#/tab/friends


#11

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