title: Website doesn't fit on Ipad and iPhone
body: <p><a href="http://www.canal.es" rel="nofollow">This is the website:</a> </p>
  
  <p>The problem is that the screen doesn´t adapts to the viewport (no white margin on the sides when first load) and also makes an strange big white margin right if you zoom out and see the entire page.</p>
  
  <p>I´m using this tag to try to achieve but still doesn´t work too much:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  </code></pre>
  
  <p>This is my css:</p>
  
  <pre><code>body {
  background-color:#fff;
  font-family:'Droid Sans', arial, sans-serif;
  color: #777;
  width: 100%;
  margin:  0;
  }
  #page {
  width: 950px;
  margin: 0px auto;
  padding:0px;
  background-color:#fff;
  z-index: 0;
  }
  </code></pre>
  
  <p>any ideas how can I fix it?</p>