title: meta tag viewport makes my website look very weird on ipad
body: <p>'Sup Stack!</p>
  
  <p>So I've been getting to grips with the viewport meta tag and how it adjusts pages to fit to the devices viewport. I've had some help from stackoverflow earlier here:
  <a href="https://stackoverflow.com/questions/11439954/footer-will-not-extend-to-100-width-on-iphone-why">Footer will not extend to 100% width on iphone, why?</a>
  mainly my concern was that my footer for my website wouldn't extend to 100% width. You can visit the website here:
  <a href="http://gloryillustration.com/" rel="nofollow noreferrer">http://gloryillustration.com/</a>
  And you can see my iphone solution here:
  <a href="http://gloryillustration.com/tests/test13.html" rel="nofollow noreferrer">http://gloryillustration.com/tests/test13.html</a>
  where i managed to sort the webpage to display properly on iphone, by using:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=0"&gt;
  </code></pre>
  
  <p>And if you were to view this on the ipad the footer <em>is</em> displaying 100% width, but the entire page is now displaying as though its zoomed waaaaay out and its adding tons of white space to the right left of the page and <em>under</em> the footer as well. I take it that the website is adjusting itself as though it is being viewed on an iphone. But im not sure <em>why</em> it's  adjusting like that? I would think that the content="device-width" would set the width to that of the device its being viewed on? Or have i misunderstood this completely.</p>
  
  <p>Is there a way to set a viewport meta tag to encompass both ipads <em>and</em> iphones for this website?</p>
  
  <p>Any help much appreciated!</p>