title: iPhone 4 mobile web app pixel scaling issues
body: <p>I'm having trouble getting my mobile web app to render properly on my iPhone 4. According to Wikipedia, the iPhone 4 has 960 width x 680 height pixels and the other iPhones have something like 480 width x 340 pixels. </p>
  
  <p>With my current build, the images and CSS styling look really tiny on the iPhone 4.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;mobile&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /&gt;
       &lt;link rel='stylesheet' href='highRes.css' media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' /&gt;
      &lt;!--[if IE]&gt;
      &lt;link rel="stylesheet" type="text/css" href="explorer.css" media="all" /&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="nav"&gt;
          &lt;div id="threeButtons"&gt;
              &lt;div class="navButton" id="friends"&gt;
                  Friends
              &lt;/div&gt;
              &lt;div class="navButton" id="nearby"&gt;
                  Nearby
              &lt;/div&gt;
              &lt;div class="navButton" id="me"&gt;
                  Me
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="settingsButton"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>body {
  background-color: #ddd; /* Background color */
  color: #222;            /* Foreground color used for text */
  font-family: "Lucida Grand"; 
  font-size: 14px;
  margin: 0;              /* Amount of negative space around the outside of the body */
  padding: 0;             /* Amount of negative space around the inside of the body */
  display: block;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>div.nav {
      text-shadow: 0px 1px 0px #fff;
      background-image: -webkit-gradient(linear, left top, left bottom, 
                                         from(#e1f7ff), to(#a1d2ed));
      height: 50px;
  }
  
      #threeButtons {
          float: left;
          margin-left: 20px;
          margin-top: 10px;
          margin-bottom: 5px;
      }
          div.navButton {
              float: left;
              height: 30px;
              font-weight: bold;
              text-align: center;
              color: white;
              text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
              line-height: 28px;
              border-width: 0 8px 0 8px;
              -webkit-border-image: url(images/button.png) 0 8 0 8;
  
          }
  
      #settingsButton {
          float: left;
          background-image: url('images/settings.png');
          height: 30px;
          width: 29px;
          margin: 10px 0 5px 60px;
      }
  </code></pre>
  
  <p>Does anyone have an explanation on how to build for the iphone 4? Should I use these media parameters to reference the CSS:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /&gt;
       &lt;link rel='stylesheet' href='highRes.css' media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' /&gt;
  </code></pre>
  
  <p>or should I hardcode the body pixel width in the CSS?</p>
  
  <p>I just checked out this article: <a href="http://menacingcloud.com/?c=highPixelDensityDisplays" rel="nofollow noreferrer">http://menacingcloud.com/?c=highPixelDensityDisplays</a></p>
  
  <p>but I want to hear what other people have done.</p>