title: Resize iPad CSS layout to fit in iPhone screen
body: <p>I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen. </p>
  
  <p>I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?</p>
  
  <p>In the index.html file I already have included:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
  </code></pre>
  
  <p>It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?</p>
  
  <p>For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.</p>