Custom Pages - View On Various Screen Sizes

Apps

I have built some custom pages which include text and images. Though they do appear decent in my smartphone, I know that with its 3.2inch screen I should make sure it shows OK on larger screens.
Thing is when you use an image, what size do you use? I had tried 300x200 but my phone got small screen and I doubt it looks OK in larger. After some advice from my girlfriend I tried with percentages (like 70% width-50% height) but this seems even worse because when screen orientation changes the percentages change too.

How do you settle out this problem?

tamworthheat

I use oversize but optimised images.  Images will look great if they are larger than the screen size, because they will downsize to fit.  It doesnt work with trying to make small images big.

If you only have a small size image to work with, the best bet is to resize it up and optimise it for Web and Devices using PhotoShop (or similar) rather than leaving it to the phone to display it pixelised.

You can use CSS to state:

.ThisDiv img { display:block; max-width:640px;  max-width:100%; }

Hope this helps

Apps

Yes, indeed it helps and thank you much.
The percentages thing from within the editor, can it work somehow decently enough for small images, like for icons for a modifier dashboard form html?

tamworthheat

I have a modified dashboard an use icons - although my icons are all 512x512px and they scale down

I use simple colour schemes where possible and optimise always to keep file size down.

Really only use percentages when the image is big and use % to scale down.

if you specify width and height as different %'s the image will distort, i use just one (usually just width).

If I want an icon to display as 20% of the screen, I imagine the largest screen size for a tablet (1280px usually) and 20% of that (256px) is the (minimum) size of my icon, if the screen size is smaller, the image will scale perfectly.

Apps

Thanks again!