title: HTML5 Fitting To Screen Resolution
body: <p>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. </p>
  
  <p>I used this site to get kind of what I'm going for <a href="http://jbkflex.wordpress.com/2012/01/09/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-part-1/" rel="nofollow">Here</a>. </p>
  
  <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Swipe Gesture - Gallery&lt;/title&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;" /&gt;
  &lt;link href="css/styles.css" rel="Stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="wrapper"&gt;
      &lt;ul id="slideContainer"&gt;
        &lt;li&gt;
          &lt;img src="img/1.jpg" width="100%" height="100%"/&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="img/2.jpg" width="100%" height="100%" /&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="img/3.jpg" width="100%" height="100%" /&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="img/4.jpg" width="100%" height="100%" /&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="img/5.jpg" width="100%" height="100%"/&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="img/6.jpg" width="100%" height="100%"/&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="img/7.jpg" width="100%" height="100%"/&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="js/scripts.js"&gt;
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body
  {
    margin:0;
    padding:10px;
  }
  
  #wrapper
  {
    overflow:hidden;
  }
  
  #wrapper ul
  {
    list-style:none;
    margin:0;
    padding:0;
    -webkit-transition: -webkit-transform 0.3s linear;
  }
  
  #wrapper ul li
  {
    float:left;
  }
  #imgFit {
     width: 100%;
     min-width: 320px;
     max-width: 768px
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> (function() {
  var swipey = {
  slideContainer: null, //&lt;ul&gt; element object that holds the image slides
  wrapper: null, //meant for masking/clipping
  slides: null, //array of all slides i.e &lt;li&gt; elements
  distanceX: 0, //distance moved in X direction i.e left or right
  startX: 0, //registers the initial touch co-ordinate
  preferredWidth: 0, //dynamic variable to set width
  preferredHeight: 0, //dynamic variable to set height
  direction: "", //direction of movement
  timer: null, //timer that set starts when touch starts
  timerCounter: 0, //counter variable for timer
  isTouchStart: false, //boolen to chk whether touch has started
  maxDistance: 0, //maximum distance in X direction that slide container can move
  currentDistance: 0, //current distance moved by slide container through translate
  
  initSwipey: function() {
  //scroll the window up to hide the address bar of the browser.
  window.setTimeout(function() { window.scrollTo(0, 1); }, 100);
  //get all the instances of the HTML elements
  swipey.wrapper = document.getElementById("wrapper");
  swipey.slideContainer = document.getElementById("slideContainer");
  swipey.slides = slideContainer.getElementsByTagName("li");
  
  //for iPhone, the width and height
  swipey.preferredWidth = 320;
  swipey.preferredHeight = 416; //510 for android
  //setting the width and height to our wrapper with overflow = hidden
  swipey.wrapper.style.width = swipey.preferredWidth + "px";
  swipey.wrapper.style.height = swipey.preferredHeight + "px";
  //setting the width to our &lt;ul&gt; element which holds all the &lt;li&gt; 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 &lt;ul&gt; element
  swipey.maxDistance = swipey.slides.length * swipey.preferredWidth;
  //initialize and assign the touch events
  swipey.initEvents();
  },
  initEvents: function() {
  //registering touch events to the wrapper
  swipey.wrapper.addEventListener("touchstart", swipey.startHandler, false);
  swipey.wrapper.addEventListener("touchmove", swipey.moveHandler, false);
  swipey.wrapper.addEventListener("touchend", swipey.endHandler, false);
  },
  //funciton called when touch start event is fired i.e finger is pressed on the screen
  startHandler: function(event) {
  //stores the starting X co-ordinate when finger touches the device screen
  swipey.startX = event.touches[0].pageX; //.changedTouches[0]
  //timer is set on
  swipey.timer = setInterval(function() { swipey.timerCounter++; }, 10);
  swipey.isTouchStart = true;
  event.preventDefault(); //prevents the window from scrolling.
  },
  //funciton called when touch move event is fired i.e finger is dragged over the screen
  moveHandler: function(event) {
  if (swipey.isTouchStart) {
  swipey.distanceX = event.touches[0].pageX - swipey.startX;
  //move the slide container along with the movement of the finger
  swipey.slideContainer.style.webkitTransform = "translate3d(" + (swipey.distanceX + swipey.currentDistance) + "px, 0,0)";
  }
  },
  //funciton called when touch end event is fired i.e finger is released from screen
  endHandler: function(event) {
  clearInterval(swipey.timer); //timer is stopped
  if (swipey.distanceX &gt; 0) {
  swipey.direction = "right";
  }
  if (swipey.distanceX &lt; 0) {
  swipey.direction = "left";
  }
  //the following conditions have been discussed in details
  if ((swipey.direction == "right" &amp;&amp; swipey.currentDistance == 0) || (swipey.direction == "left" &amp;&amp; swipey.currentDistance == -(swipey.maxDistance - swipey.preferredWidth))) {
  swipey.comeBack();
  }
  else if (swipey.timerCounter &lt; 30 &amp;&amp; swipey.distanceX &gt; 10) {
  swipey.moveRight();
  }
  else if (swipey.timerCounter &lt; 30 &amp;&amp; swipey.distanceX &lt; -10) {
  swipey.moveLeft();
  }
  else if (swipey.distanceX &lt;= -(swipey.preferredWidth / 2)) { //-160
  swipey.moveLeft();
  }
  else if (swipey.distanceX &gt;= (swipey.preferredWidth / 2)) { //160
  swipey.moveRight();
  }
  else {
  swipey.comeBack();
  }
  
  swipey.timerCounter = 0; //reset timerCounter
  swipey.isTouchStart = false; //reset the boolean var
  swipey.distanceX = 0; //reset the distance moved for next iteration
  },
  moveLeft: function() {
  swipey.currentDistance += -swipey.preferredWidth;
  swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
  //using CSS3 transformations - translate3d function for movement
  swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
  },
  moveRight: function() {
  swipey.currentDistance += swipey.preferredWidth;
  swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
  swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
  },
  comeBack: function() {
  swipey.slideContainer.style.webkitTransitionDuration = 250 + "ms";
  swipey.slideContainer.style.webkitTransitionTimingFunction = "ease-out";
  swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
  }
  }; //end of swipey object
  window.swipeyObj = swipey; //expose to global window object
  })();
  
  swipeyObj.initSwipey(); //invoke the init method to get started
  </code></pre>
  
  <p>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</p>