我正在编写一个移动网站，我试图让它调整大小，以便它占据设备的整个宽度而不会溢出。我以为我在这里找到了答案，
但是当我应用推荐的<meta>标签时，当我在移动浏览器中打开它时，它只是将我的网站放大到超级接近。有谁知道为什么我不能让网站精确地缩放到设备的宽度？我目前正在使用 Xcode iOS Simulator 打开站点，并且正在使用 jQuery。
HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Car Finance Mobile</title>
<link rel="stylesheet" type="text/css" href="carfinance_css.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$loop = 0;
$("#menu_button").click(function(){
if ($loop == 0)
{
$("#page_container").animate({left:'+=400px'}, 200);
$loop = 1;
}
else
{
$("#page_container").animate({left:'-=400px'}, 200);
$loop = 0;
}
});
});
</script>
</head>
<body>
<div id="menu">
<p>MAIN MENU</p>
<div id="button_container">
<ul>
<li id="current_page">HOME</li>
<li>CAR LOANS</li>
<li>AUTO LOAN REFINANCING</li>
<li>AUTO CALCULATORS</li>
<li>TOOLS AND RESOURCES</li>
</ul>
</div>
</div>
<div id="page_container">
<div id="menu_bar">
<img id="menu_button" src="img/menu_button.png" style="margin:20px;" />
<img src="img/car_finance_logo.png" style="float:right; margin:20px;;" />
</div>
<div id="image_container">
<img src="img/hero.jpg" />
</div>
<div class="text_container">
<p class="bold">Apply Now for a Car Loan or Refinancing Even if You Have Less Than Perfect Credit</p>
<p>If you’re in the market for a new or used car, truck or SUV, CarFinance.com offers financing options for all credit situations. With a car loan from CarFinance.com, you’ll get competitive rates and the convenience of completing your loan documents online.<p>
</div>
<img src="img/click_loan.jpg" class="button" />
<div class="text_container">
<p class="bold">Get a Great Rate On A New or Used Car Loan</p>
<p>Don't get locked in at the wrong rate on financing for your new vehicle. CarFinance.com has rates and terms for everyone, even if you have bad or no credit. No fees or obligation to apply - apply online for FREE now!</p>
</div>
<img src="img/apply_loan.jpg" class="button" />
<div class="text_container">
<p class="bold">Refinance You Existing Loan</p>
<p>You can reduce your monthly payment by hundreds of dollars by simply refinancing your existing car loan. CarFinance.com has rates that may help lower your monthly payments, even with bad credit. No fees or obligation to apply - apply for FREE now!</p>
</div>
<img src="img/apply_loan.jpg" class="button" />
<div class="gradient" style="height:200px;">
<div class="text_container">
<p class="bold" style="color:#288F3B; text-align:center; font-size:23px;">CarFinance.com offers new, used and refinance auto loans for non-prime customers. </br> <br />
Apply online from anywhere. Get a quick credit decision with our virtually paperless process.</p>
</div>
</div>
<p class="header">How to Apply</p>
<div style="width:50px; margin-left:20px; float:left;">
<img src="img/1.png" style="margin-top:10px;" />
<img src="img/2.png" style="margin-top:10px;" />
<img src="img/3.png" style="margin-top:10px;" />
<img src="img/4.png" style="margin-top:10px;" />
</div>
<div class="text_container" style="position:relative; top:-7px;">
<ul>
<li>Easy online application is quick to complete</li>
<li>Recieve our credit decision in minutes</li>
<li>Loan Agreement is sent online for signiture</li>
<li>Get your loan before you go shopping</li>
</ul>
</div>
<img class="button" src="img/apply_now.jpg" />
<p class="header">About Our Process</p>
<div style="width:50px; margin-left:20px; float:left;">
<img src="img/check.png" style="margin-top:10px;" />
<img src="img/check.png" style="margin-top:10px;" />
<img src="img/check.png" style="margin-top:10px;" />
<img src="img/check.png" style="margin-top:10px;" />
</div>
<div class="text_container" style="position:relative; top:-7px;">
<ul>
<li>Safe and Secure online process - we are the lender</li>
<li>Convenience to match your schedule</li>
<li>Customer service available seven days a week</li>
<li>No loan fees or obligation</li>
</ul>
</div>
<img class="button" src="img/learn_more.jpg" />
</div>
</body>
</html>
CSS
@charset "UTF-8";
@font-face
{
font-family:Gotham Black;
src:url(fonts/gotham-black.ttf);
font-family:Frutiger LT Standard;
src:url(fonts/FrutigerLTStd-Bold.otf)
}
body
{
margin:0px;
background-color:#2F2F2F;
}
/*<Side Menu>*/
#menu
{
text-shadow:1px 2px #000000;
background-color:#288E3A;
font-family:Gotham Black, Helvetica Bold, sans-serif;
font-size:24px;
color:#FFFFFF;
width:400px;
}
#menu ul
{
padding:15px;
list-style-type:none;
}
#menu ul li#current_page
{
background:#F6C31F;
}
#menu ul li
{
background-color:#363636;
margin:0px 0px 15px;
line-height:50px;
padding:0px 5px 0px 5px;
}
#button_container
{
background-color:#1F1F1F;
height:345px;
}
#menu p
{
font-family:Arial Black, Helvetica Bold, sans-serif;
color:#FFFFFF;
font-size:42px;
margin:0px 0px -25px 13px;
height:101px;
}
/*</Side Menu>*/
/*<Main Body>*/
ul
{
font-size:24px;
list-style-type:none;
}
ul li
{
margin-top:24px;
}
#page_container
{
position:relative;
top:-445px;
width:640px;
background-color:#FFFFFF;
background-image:url(img/background.jpg);
background-position: 0px 550px;
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
}
#menu_bar
{
background-color:#288E3A;
height:100px;
}
#image_container
{
margin:0px;
}
.text_container
{
margin:0px 20px 0px;
}
.header
{
font-family:Arial Bold, Arial Black, sans-serif;
font-size:36px;
margin:0px 20px 0px;
}
.bold
{
font-size:25px;
font-family:Frutiger LT Standard, Arial Bold, Arial Black, sans-serif;
margin-bottom:-10px;
}
.center
{
display:block;
margin-left:auto;
margin-right:auto;
}
.button
{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:70px;
}
.gradient
{
border:1px solid #AAAAAA;
-moz-box-shadow: 2px 2px 2px #333333;
-webkit-box-shadow: 2px 2px 2px #33333;
margin-bottom:70px;
box-shadow: 2px 2px 2px #333333;
/* Old browsers */
background: rgb(238,238,238);
/* FF3.6+ */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
/* IE10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
/* W3C */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
/* IE6-8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}