How do I make my mobile website auto-adjust its screen resolution?
I'm working on a mobile website, but when I view the site on a phone, the website is automatically shrunk to a very small font and the user has to zoom in to read the text.
How do I make it automatically display at the right size each time a user visits the site?
Here's my CSS:
.content {
width:auto;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666开发者_如何学编程;
text-align:justify;
}
And my HTML:
<div class="content"> Hello
<div id="logo"><img src="banner.png" border="0"></div>
</div>
Despite my code, on Android and iPhone devices, the text appears very tiny. How do I fix this?
Try adding this to your <head>
:
<meta name="viewport" content="width=device-width, user-scalable=yes">
user-scalable is optional. When it is set to false it prevents the user from using the browser's zoom.
精彩评论