I've been looking around for a solution to this with very little luck. I'm not very good at HTML or CSS. I understand basics, but I need what I am making in HTML 5. So I would really appreciate any assistance.

It supposed to be an HTML5 app that can be displayed on Android, iPhone, and iPad. It really doesn't have many features. Mainly just the ability to swipe to flip pages just like that link shows. My issue is I can't get the images and it as a whole to fit whichever screen it is on. It seems like it is hard coded to work at iPhone size, but when displayed on an iPad it takes up a small portion of the screen. I'll post his code below so you don't have to go there to see it.

I added the imageFit one because the images were not scaling to the screen size and that was my attempt. It seems that it goes for the max-width no matter what. If there are any better ways of doing this or if you know a fix I would really appreciate the help. Thank you

@DerekGutierrez Just gave that a shot. Stretched the whole thing out across. Both my Android phone and my iPad had the image displayed stretched.
–
stevenMay 9 '12 at 22:09

I tried setting preferredWidth = device-width. Same with height. It fits the screen better on both devices now except now its scroll down the list instead of side swipping. It also doesn't cover the whole screen there is a white bar on the left side.
–
stevenMay 9 '12 at 22:17

If the above doesn't work, also try removing #imgFit style and see if it fixes the scrolling. problem. It may be interfering with something.

Also, by setting the image widths and heights to 100% with the inline styling they will look out of proportion when loaded on different resolutions. If you want the images to stay a specific proportion, you can try just setting the width to 100%, then the browser should scale it properly.