Html5 Fitting To Screen Resolution

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 real

Solution 1:

Try changing this chunk of code:

//for iPhone, the width and height
swipey.preferredWidth = 320;
swipey.preferredHeight = 416; //510 for android

To:

//Auto-detect resolution via javascript:
swipey.preferredWidth = screen.width;
swipey.preferredHeight = screen.height;

This will use javascript to auto-detect the screen resolution.

Then the script will multiply the li width by the number of li elements to adjust the slideContainer ul to fit content:

//setting the width to our <ul> element which holds all the <li> elements
swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
swipey.slideContainer.style.height = swipey.preferredHeight + "px";
//calculating the max distance of travel for Slide Container i.e <ul> element
swipey.maxDistance = swipey.slides.length * swipey.preferredWidth;

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.