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>
4

2 回答 2

1

似乎您只span12在所有 中使用rows，这意味着当视口更改时它们永远不会被分割。具有响应式网格布局的很大一部分是将行的元素分成段，以便在视口低于某些阈值时可以调整行的布局。

如果<div>每行中的主要内容是该行中span12的所有内容，则该行中的所有内容将基本上保持不变width=100%，并且内容只会随着视口的减小而缩小。

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

于 2012-08-30T23:51:42.470 回答
0

使用这个布局，我认为它会解决你的问题。我删除了行类。 标题在这里

<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>
于 2015-01-16T11:40:01.083 回答