Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do make a mobile web page not shrink?

Tags:

mobile

When you visit a webpage on your phone (I am using Android) if its a regular page it shrinks it to fit in your phone screen.

I always assumed the way to make a mobile page were to make the page small enough to fit completely in the phone's screen resolution without shrinking.

This is not happening though. I even specifically set my page size to body{ width: 300px;}, still when I load it in my phone it is shrunk in the top left corner with plenty of free space around it.

What am I doing wrong?

like image 617
JD Isaacks Avatar asked Aug 16 '11 13:08

JD Isaacks


1 Answers

You need to use viewport meta tag

<!doctype html>
<html>
<head>
    <title>Hello world!</title>

    <meta name="viewport" content="width=device-width"/>
</head>

<body>

<p>Hello world!</p>

</body>
</html>

Read in detail here http://davidbcalhoun.com/2010/viewport-metatag

like image 126
Jitendra Vyas Avatar answered Oct 29 '22 04:10

Jitendra Vyas