2012-08-30 45 views
1

使用移动设备查看移动设备时,我似乎无法使此网站正确格式化(对移动设备进行“响应”)。移动网站无法正确地查看视图

我正在使用Bootstrap,但是当我从移动设备上查看时,它看起来像是普通桌面正在查看它。我已经完成的其他网站,它“放大”在文本上,以便在移动设备上看起来不错。

对不起,如果我在这里错过了一些小东西,但任何帮助将不胜感激!

下面是我使用的代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>TITLE HERE</title> 

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
<meta content="yes" name="apple-mobile-web-app-capable"> 

<link rel="stylesheet" href="/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css"> 

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="/js/bootstrap.js"></script> 

<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> 
</head> 
<body> 
<div role="main"> 
    <header> 
     <div class="container"> 
      <div class="row address"> 
       <div class="span12"> 
        <h2><?=$content['address']?><br/> 
        <?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2> 
       </div> 
      </div> 
      <div class="row-fluid prop_info"> 
       <div class="span12"> 
        <h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3> 
       </div> 
      </div> 
     </div> 
    </header> 
    <div class="container"> 
     <div class="row center"> 
      <div class="span12"> 
       <ul class="nav nav-pills menu"> 
        <li><a href="#">VIDEO</a></li> 
        <li><a href="#">PHOTOS</a></li> 
        <li><a href="#">WALKSCORE MAP</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row center"> 
       <div class="span12"> 
        <div id="description-shadow-video-top"></div> 
        <iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe> 
        <div id="description-shadow-video"></div> 
       </div> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <?=$content['main_content']?> 
       </div> 
      </div> 
     </div> 
     <br/> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <div class="pull-left"> 
         <br/> 
         <br/> 
         <br/> 
         <img src="/img/foundation/presented-by.png" width="120" alt="" /> 
        </div> 
        <div class="pull-left"> 
         <img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" /> 
        </div> 
       </div> 
      </div> 
      <br/> 
      <div class="row center"> 
       <div class="span12"> 
        <h3><?=$user['first_name']?> <?=$user['last_name']?></h3> 
        <br /> 
        <?=$user['company']?><br /><?=$user['address']?> 
        <br /> 
        <?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?> 
        <br /> 
        <br /> 
        <?=$user['contact_number']?> 
        <br /> 
        <a href="mailto:<?=$user['email_address']?>"><?=$user['email_address']?></a> 
        <br /> 
        <br /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer> 
     <div class="container"> 
      <div class="span12"> 
       <a href="http://www.somesite.com" target="_blank"> 
        <img src="/img/the_logo.png" width="210" /> 
      </div> 
     </div> 
    </footer> 
</div> 
</body> 
</html> 

回答

1

看来你只能在所有rows使用span12,这意味着他们将永远不会分段当视域的变化。响应式网格布局的很大一部分是将行中的元素分解为多个段,以便在视口低于特定阈值时可以调整行的布局。

如果每行中的主要<div>span12该行中的所有内容将基本上保持为width=100%,并且内容仅随着视口减小而缩小。

我建议为每个主要<div>避免使用span12,并花一些时间重新考虑内容的粒度。请参阅Twitter Bootstrap documentation on Scaffolding以供参考。

+0

啊确定...是的,这是有道理的。谢谢!我现在将更深入地检查这些文档。 – TheTC

0

使用此布局,我认为它会解决您的问题。我删除了行类。 TITLE HERE

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> 

<link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css"> 

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script> 

<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> </head> <body> <div role="main"> 
    <header> 
     <div class="container"> 
      <div class="address"> 
       <div class="span12"> 
        <h2><?=$content['address']?><br/> 
        <?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2> 
       </div> 
      </div> 
      <div class="row-fluid prop_info"> 
       <div class="span12"> 
        <h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3> 
       </div> 
      </div> 
     </div> 
    </header> 
    <div class="container"> 
     <div class="center"> 
      <div class="span12"> 
       <ul class="nav nav-pills menu"> 
        <li><a href="#">VIDEO</a></li> 
        <li><a href="#">PHOTOS</a></li> 
        <li><a href="#">WALKSCORE MAP</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="center"> 
       <div class="span12"> 
        <div id="description-shadow-video-top"></div> 
        <iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe> 
        <div id="description-shadow-video"></div> 
       </div> 
      </div> 
     </div> 
     <div class="container"> 

       <div class="span12"> 
        <?=$content['main_content']?> 
       </div> 

     </div> 
     <br/> 
     <div class="container"> 

       <div class="span12"> 
        <div class="pull-left"> 
         <br/> 
         <br/> 
         <br/> 
         <img src="/img/foundation/presented-by.png" width="120" alt="" /> 
        </div> 
        <div class="pull-left"> 
         <img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" /> 
        </div> 
       </div> 

      <br/> 
      <div class="center"> 
       <div class="span12"> 
        <h3><?=$user['first_name']?> <?=$user['last_name']?></h3> 
        <br /> 
        <?=$user['company']?><br /><?=$user['address']?> 
        <br /> 
        <?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?> 
        <br /> 
        <br /> 
        <?=$user['contact_number']?> 
        <br /> 
        <a href="mailto:<?=$user['email_address']?>"><?=$user['email_address']?></a> 
        <br /> 
        <br /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer> 
     <div class="container"> 
      <div class="span12"> 
       <a href="http://www.somesite.com" target="_blank"> 
        <img src="/img/the_logo.png" width="210" /> 
      </div> 
     </div> 
    </footer> </div> </body> </html>