html - 使用 CSS 和视口(viewport)时标题宽度不是 100%

Question

我已尝试使用 Viewport 元标记来修复此错误，但我不太确定为什么会出现这种情况。这是问题的屏幕截图:

这是我试过的视口(viewport)代码:

<meta name="viewport" content="width=device-width, initial-scale=1" />

这是 CSS:

#header{
background: #afafaf url(images/complit/header.jpg) top left repeat-x;
text-align: left;
text-shadow: 0 1px 0 #ddd;
zoom: 1;
min-width: 100%;
}

#top{
height:5px;
background: #222;
}

.subhead{
width: 90%;
min-width: 1020px;
margin: 0 auto;
height:44px;
padding: 8px 0px;
zoom: 1;
}

#userbar{
background: transparent url(images/complit/userbar.png) top left repeat-x;
text-align: left;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #858584;
text-shadow: 0 -1px 0 #000;
font-size: 12px;
}

这是标题模板:

            <div name="top" id="top"></div>
                <div id="header">
                    <div class="subhead">
                        <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
                        <div class="top_menu">
                            <ul class="toplinks">
                                <div class="endsep"></div>
                                <li><a href="{$mybb->settings['homeurl']}"><i class="fa fa-home"></i> <strong>Home</strong><br /><span class="smalltext">CompLit Complice</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}"><i class="fa fa-globe"></i> <strong>Forums</strong><br /><span class="smalltext">Get Involved</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-group"></i> <strong>Members</strong><br /><span class="smalltext">Our Board's Users</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar"></i> <strong>Calendar</strong><br /><span class="smalltext">Important Dates</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-info-circle"></i> <strong>Help</strong><br /><span class="smalltext">Info & Resources</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="userbar">
                    <div class="subuserbar">
                        <div class="search">
                            <form action="search.php" method="post">
                                <form method="post" action="search.php">
            <input type="hidden" name="action" value="do_search" />
            <input type="hidden" name="postthread" value="1" />
            <input type="hidden" name="forums" value="all" />
            <input type="hidden" name="showresults" value="threads" />
            <input type="text" name="keywords" value="" placeholder="Type and hit enter..." class="searchbox" />
            </form>
                            </form>
                        </div>
                        {$welcomeblock}
                    </div>
                </div>
                <div id="container">
                    <hr class="hidden" />
                    <br class="clear" />
                    <div id="content">
                        {$pm_notice}
                        {$bannedwarning}
                        {$bbclosedwarning}
                        {$unreadreports}
                        {$pending_joinrequests}
                        <navigation>
                        <br />
                        {$board_messages}<br />

谢谢。

这是一个链接:http://complit-complice.net/forums/index.php

Answer 1

没有网站链接，我们只能猜测。但是从您发布的代码来看，它很可能是您在 .subhead 上设置的宽度，这比它在小屏幕上的容器要宽得多。

.subhead {
    min-width: 1020px;
}

编辑:好的，通过链接，我明白发生了什么。尝试将其添加到您的样式表中:

#userbar, #header, #top {min-width: 1024px;}