Question

在使用移动设备查看时，我似乎无法正确格式化此网站（对移动设备“响应”）。

我正在使用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>

Answer 1

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

如果每行中的主<div>为span12，则该行中的所有内容都将基本保持width=100%，并且内容只会在视口缩小时缩小。

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

Answer 2

使用此布局，我认为它将解决您的问题。我删除了行类。 在这里

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

移动网站无法正确适应视图

2 个答案: