Question

我已尝试使用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;}

CSS和Viewport的标题宽度不是100％

1 个答案: