Everything is very small (Android/Galaxy S3)
I'm new to jQuery Mobile and I'm having a small problem when viewing a page with my android device. Everything on the page is tiny. I'll just show you an example to avoid further confusion.

http://hacknet.se/m/
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>Demo</title>
- <!-- Load jQuery Mobile -->
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
- </head>
- <body>
- <!-- Header -->
- <div id="header">
- <header data-role="header">
- <h1>Demo</h1>
- </div>
- <!-- List-based Content -->
- <article data-role="content">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor diam ut ante scelerisque non viverra sem viverra. Aenean pulvinar ultricies purus, quis aliquet lectus eleifend eget. Duis egestas mollis scelerisque. Donec fermentum est eu enim porttitor facilisis. Ut sapien nibh, hendrerit et consectetur at, molestie et mauris. Proin feugiat dolor accumsan metus mollis placerat. Donec aliquet pretium ante venenatis dignissim. Morbi suscipit nulla ut quam egestas vulputate. Quisque vitae massa mi.</p>
- </article>
- <!-- Footer -->
- <footer data-role="footer" data-position="fixed">
- <!-- Navbar -->
- <nav data-role="navbar">
- <ul>
- <li><a href="home" data-icon="home">link1</a></li>
- <li><a href="services" data-icon="grid">link2</a></li>
- <li><a href="map" data-icon="info">link3</a></li>
- <li><a href="Info" data-icon="plus">link4</a></li>
- </ul>
- </nav>
- </footer>
- </body>
- </html>
What am I doing wrong? It looks fine on my PC.