How do make a mobile web page not shrink?
When you visit开发者_C百科 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?
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
This is because the width of the body is in relation to the browsing device.
Most modern phones simulate a desktop browser and so a width of 300px is 300px in relation to the overall browser window. Basically, you'll see the same in your desktop browser as you will in your phone browser.
Ideally the thing to do is to display something slightly different to mobile users. Usually a cut down version of the page that has larger menu items and hides much of the usual content that isn't necessary. (fancy header etc).
加载中,请稍侯......
精彩评论