Can't control mobile viewport width with meta tags?
===

I'm building a webpage meant for mobile and the width of the content is 320px. Yet when I load it into safari (or chrome) on the iPhone it still appears very small rather than assuming the whole width of the screen.

I've used every combination of viewport and handheld meta tags that I could find on the internet but none produce the intended result.

What is my mistake?

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="HandheldFriendly" content="True">
      <meta name="MobileOptimized" content="320">
      <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
      <title>Untitled Document</title>
      <style>
        #content { 
          width:320px; 
          height:100px; 
          background:#000; 
          margin:0px auto;}
      </style>
    </head>
    <body>
      <div id="content"></div>
    </body>
    </html>

Here is the live version that I've been testing with on my phone:
http://robgordon.info/index2.html